M-Labs
/
web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Add options for the cards #93

Merged
sb10q merged 42 commits from esavkin/web2019:85-variants into master 2023-11-28 15:32:34 +08:00
Conversation 24 Commits 42 Files Changed 9 +29 -65
1 changed files with 29 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 58bc01cf06 - Show all commits

94
static/js/shop_components.jsx
View File

@ -7,9 +7,22 @@ import {useClickAway} from "@uidotdev/usehooks";
import {OverlayTrigger, Tooltip} from "react-bootstrap"; import {OverlayTrigger, Tooltip} from "react-bootstrap";
// https://stackoverflow.com/a/70511311 // https://stackoverflow.com/a/70511311
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); const true_type_of = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
function Tip({id, tip}) {
return (
<OverlayTrigger
placement="auto"
trigger={['click', 'hover', 'focus']}
style={{display: 'inline'}}
overlay={<Tooltip id={id}>{tip}</Tooltip>}
>
<img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
</OverlayTrigger>
);
}
class Radio extends Component { class Radio extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -37,22 +50,10 @@ class Radio extends Component {
return ( return (
<div className="shop-radio" key={this.props.id}> <div className="shop-radio" key={this.props.id}>
<div style={{"display": "inline"}}> <div style={{"display": "inline"}}>
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null} {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
{this.props.title} {this.props.title}
</div> </div>
{ {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
this.props.tip ?
(<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
style={{"display": "inline"}} overlay={
<Tooltip id={this.props.id + "tooltip"}>
{this.props.tip}
</Tooltip>
}>
<img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
</OverlayTrigger>)
:
null
}
{this.props.variants.map((variant, _) => ( {this.props.variants.map((variant, _) => (
<div className="form-check" key={key + variant}> <div className="form-check" key={key + variant}>
<input <input
@ -117,22 +118,10 @@ class Switch extends Component {
onChange={this.handleClick} onChange={this.handleClick}
/> />
<label className="form-check-label" htmlFor={key} style={{"display": "inline"}}> <label className="form-check-label" htmlFor={key} style={{"display": "inline"}}>
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null} {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
{this.props.title} {this.props.title}
</label> </label>
{ {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
this.props.tip ?
(<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
style={{"display": "inline"}} overlay={
<Tooltip id={this.props.id + "tooltip"}>
{this.props.tip}
</Tooltip>
}>
<img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
</OverlayTrigger>)
:
null
}
</div> </div>
</div> </div>
); );
@ -169,24 +158,11 @@ class Line extends Component {
let key = this.props.id + this.props.outvar; let key = this.props.id + this.props.outvar;
return ( return (
<div className="shop-line" key={this.props.id}> <div className="shop-line" key={this.props.id}>
<label htmlFor={key} className="form-label"> <label htmlFor={key} className="form-label">
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null} {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
{this.props.title}: {this.props.title}:
</label> </label>
{ {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
this.props.tip ?
(<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
style={{"display": "inline"}} overlay={
<Tooltip id={this.props.id + "tooltip"}>
{this.props.tip}
</Tooltip>
}>
<img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
</OverlayTrigger>)
:
null
}
<input type="text" className="form-control form-control-sm" id={key} onChange={this.handleClick} <input type="text" className="form-control form-control-sm" id={key} onChange={this.handleClick}
value={this.state.text}/> value={this.state.text}/>
</div> </div>
@ -247,22 +223,10 @@ class SwitchLine extends Component {
onChange={this.handleCheck} onChange={this.handleCheck}
/> />
<label className="form-check-label" htmlFor={key + "switch"}> <label className="form-check-label" htmlFor={key + "switch"}>
{this.props.icon ? <img src={`/images${this.props.icon}`} className="options-icon"/> : null} {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}
{this.props.title} {this.props.title}
</label> </label>
{ {this.props.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
this.props.tip ?
(<OverlayTrigger placement="auto" trigger={["click", "hover", "focus"]}
style={{"display": "inline"}} overlay={
<Tooltip id={this.props.id + "tooltip"}>
{this.props.tip}
</Tooltip>
}>
<img src={`/images/shop/icon-reminder.svg`} className="options-icon"/>
</OverlayTrigger>)
:
null
}
</div> </div>
<input type="text" className="form-control form-control-sm" id={key + "line"} onChange={this.handleText} <input type="text" className="form-control form-control-sm" id={key + "line"} onChange={this.handleText}
value={this.state.text} disabled={!this.state.checked}/> value={this.state.text} disabled={!this.state.checked}/>
@ -292,7 +256,7 @@ const componentsList = {
export function ProcessOptions({options, data, target, id}) { export function ProcessOptions({options, data, target, id}) {
let options_t = trueTypeOf(options); let options_t = true_type_of(options);
if (options_t === "array") { if (options_t === "array") {
return Array.from( return Array.from(
@ -305,8 +269,8 @@ export function ProcessOptions({options, data, target, id}) {
); );
} else if (options_t === "object") { } else if (options_t === "object") {
if ( if (
trueTypeOf(options.type) === "string" && true_type_of(options.type) === "string" &&
(trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array") (true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
) { ) {
if (options.type in componentsList) { if (options.type in componentsList) {
return componentsList[options.type](target, id + options.type, data, options.args); return componentsList[options.type](target, id + options.type, data, options.args);
@ -330,7 +294,7 @@ export function ProcessOptions({options, data, target, id}) {
} }
export function FilterOptions(options, data) { export function FilterOptions(options, data) {
let options_t = trueTypeOf(options); let options_t = true_type_of(options);
let target = {}; let target = {};
if (options_t === "array") { if (options_t === "array") {
@ -339,8 +303,8 @@ export function FilterOptions(options, data) {
}); });
} else if (options_t === "object") { } else if (options_t === "object") {
if ( if (
trueTypeOf(options.type) === "string" && true_type_of(options.type) === "string" &&
(trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array") (true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
) { ) {
if (options.type in componentsList) { if (options.type in componentsList) {
target[options.args.outvar] = data[options.args.outvar]; target[options.args.outvar] = data[options.args.outvar];
@ -443,7 +407,7 @@ export function OptionsSummaryPopup({id, options, data}) {
}; };
const stringify = (value) => { const stringify = (value) => {
let value_type = trueTypeOf(value); let value_type = true_type_of(value);
if (value_type === "string") { if (value_type === "string") {
return value; return value;
} else if (value_type === "object") { } else if (value_type === "object") {