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";
// 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 {
constructor(props) {
super(props);
@ -37,22 +50,10 @@ class Radio extends Component {
return (
<div className="shop-radio" key={this.props.id}>
<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}
</div>
{
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.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
{this.props.variants.map((variant, _) => (
<div className="form-check" key={key + variant}>
<input
@ -117,22 +118,10 @@ class Switch extends Component {
onChange={this.handleClick}
/>
<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}
</label>
{
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.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
</div>
</div>
);
@ -169,24 +158,11 @@ class Line extends Component {
let key = this.props.id + this.props.outvar;
return (
<div className="shop-line" key={this.props.id}>
<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}:
</label>
{
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.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
<input type="text" className="form-control form-control-sm" id={key} onChange={this.handleClick}
value={this.state.text}/>
</div>
@ -247,22 +223,10 @@ class SwitchLine extends Component {
onChange={this.handleCheck}
/>
<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}
</label>
{
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.tip && <Tip id={this.props.id + "tooltip"} tip={this.props.tip}/>}
</div>
<input type="text" className="form-control form-control-sm" id={key + "line"} onChange={this.handleText}
value={this.state.text} disabled={!this.state.checked}/>
@ -292,7 +256,7 @@ const componentsList = {
export function ProcessOptions({options, data, target, id}) {
let options_t = trueTypeOf(options);
let options_t = true_type_of(options);
if (options_t === "array") {
return Array.from(
@ -305,8 +269,8 @@ export function ProcessOptions({options, data, target, id}) {
);
} else if (options_t === "object") {
if (
trueTypeOf(options.type) === "string" &&
(trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array")
true_type_of(options.type) === "string" &&
(true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
) {
if (options.type in componentsList) {
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) {
let options_t = trueTypeOf(options);
let options_t = true_type_of(options);
let target = {};
if (options_t === "array") {
@ -339,8 +303,8 @@ export function FilterOptions(options, data) {
});
} else if (options_t === "object") {
if (
trueTypeOf(options.type) === "string" &&
(trueTypeOf(options.args) === "object" || trueTypeOf(options.items) === "array")
true_type_of(options.type) === "string" &&
(true_type_of(options.args) === "object" || true_type_of(options.items) === "array")
) {
if (options.type in componentsList) {
target[options.args.outvar] = data[options.args.outvar];
@ -443,7 +407,7 @@ export function OptionsSummaryPopup({id, options, data}) {
};
const stringify = (value) => {
let value_type = trueTypeOf(value);
let value_type = true_type_of(value);
if (value_type === "string") {
return value;
} else if (value_type === "object") {