antd#Slider JavaScript Examples
The following examples show how to use
antd#Slider.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From acy-dex-interface with MIT License | 6 votes |
|
StyledSlider = styled(Slider)`
.ant-slider-track {
background: #929293;
height: 3px;
}
.ant-slider-rail {
background: #29292c;
height: 3px;
}
.ant-slider-handle {
background: #929293;
width: 12px;
height: 12px;
border: none;
}
.ant-slider-handle-active {
background: #929293;
width: 12px;
height: 12px;
border: none;
}
.ant-slider-dot {
border: 1.5px solid #29292c;
border-radius: 1px;
background: #29292c;
width: 2px;
height: 10px;
}
.ant-slider-dot-active {
border: 1.5px solid #929293;
border-radius: 1px;
background: #929293;
width: 2px;
height: 10px;
}
.ant-slider-with-marks {
margin-bottom: 50px;
}
`
Example #2
| Source File: index.js From scalable-form-platform with MIT License | 6 votes |
|
render() {
const {id, disabled, readonly, options, autofocus} = this.props;
let {value} = this.props;
if (typeof value === 'undefined' || value === '') {
value = [];
}
//解析schema中约定的_errorType字段，用来标识是validate中哪种类型校验不通过
let validateMessage = '';
let _errorType = options._errorType || '';
if (_errorType !== '' && typeof options.validate !== 'undefined') {
validateMessage = this._getValidateMessage(_errorType, options.validate);
}
return (
<div className={classnames({
'ant-form-item-control': true,
'xform-custom-widget': true,
'xform-custom-slider-range': true,
'has-error': _errorType !== ''
})}>
<Slider
range
id={id}
autoFocus={autofocus}
disabled={disabled}
readOnly={readonly}
value={value}
onChange={this.handleSliderChange}
onAfterChange={this.handleSliderChange}
{...options}
/>
<div className="ant-form-explain">{validateMessage}</div>
</div>
);
}
Example #3
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
const { disabled } = this.state
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<Slider defaultValue={30} disabled={disabled} />
<Slider range defaultValue={[20, 50]} disabled={disabled} />
<br />
<Switch
unCheckedChildren="enabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.handleDisabledChange}
/>
</div>
</div>
)
}
Example #4
| Source File: LabelsDesign.jsx From ui with MIT License | 6 votes |
|
LabelsDesign = (props) => {
const { config, onUpdate } = props;
const [newConfig, handleChange] = useUpdateThrottled(onUpdate, config);
const minLabelSize = 0;
const maxLabelSize = 50;
return (
<Form>
<p><strong>Toggle Labels</strong></p>
<Form.Item>
<Radio.Group onChange={(e) => onUpdate({ labels: { enabled: e.target.value } })} value={config.labels.enabled}>
<Radio value>Show</Radio>
<Radio value={false}>Hide</Radio>
</Radio.Group>
</Form.Item>
<p><strong>Label Options</strong></p>
<Form.Item
label='Size'
>
<Slider
value={newConfig.labels.size}
min={minLabelSize}
max={maxLabelSize}
disabled={!config.labels.enabled}
onChange={(value) => {
handleChange({ labels: { size: value } });
}}
marks={{ 0: minLabelSize, 50: maxLabelSize }}
/>
</Form.Item>
</Form>
);
}
Example #5
| Source File: index.js From vindr-lab-viewer with MIT License | 6 votes |
|
function Index() {
const [radius, setRadius] = useState(defaultValue);
const module = cornerstoneTools.getModule('segmentation');
const handleChangeValue = useCallback(value => {
setRadius(value);
module.setters.radius(value);
}, []);
useEffect(() => {
module.setters.radius(defaultValue);
}, []);
return (
<div style={styles.wrapper}>
<i style={styles.radius}>Radius</i>
<Slider
defaultValue={radius}
tooltipVisible
onChange={handleChangeValue}
style={styles.slider}
max={50}
/>
</div>
);
}
Example #6
| Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
const { disabled } = this.state;
return (
<>
<Slider defaultValue={30} disabled={disabled} />
<Slider range defaultValue={[20, 50]} disabled={disabled} />
Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
</>
);
}
Example #7
| Source File: Slider.jsx From ResoBin with MIT License | 6 votes |
|
StyledSlider = styled(Slider)`
.ant-slider-track {
background: ${({ theme }) => theme.darksecondary};
}
.ant-slider-handle,
.ant-slider-dot {
background: ${({ theme }) => theme.darksecondary};
border-color: ${({ theme }) => theme.primary};
}
`
Example #8
| Source File: Playback.js From next-terminal with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return (
<div>
<div id="player">
<div id="display">
<div className="notification-container">
<div className="seek-notification">
</div>
</div>
</div>
<Row justify="space-around" align="middle" style={{marginLeft: 7, marginRight: 7, marginTop: 3}}
gutter={[5, 5]}>
<Col flex="none">
<Tooltip title={this.state.playPauseIconTitle}>
<Button size='small' onClick={this.handlePlayPause} icon={this.state.playPauseIcon}/>
</Tooltip>
</Col>
<Col flex="auto">
<Slider value={this.state.percent} max={this.state.max} tooltipVisible={false}
onChange={this.handleProgressChange}/>
</Col>
<Col flex='none'>
<Select size={'small'} defaultValue='1' value={this.state.speed} onChange={(value) => {
value = parseInt(value)
this.setState({
'speed': value
});
if (value === 1) {
this.stopSpeedUp();
} else {
this.startSpeedUp();
}
}}>
<Select.Option key="1" value={1}>1x</Select.Option>
<Select.Option key="2" value={2}>2x</Select.Option>
<Select.Option key="5" value={5}>5x</Select.Option>
</Select>
</Col>
<Col flex='none'>
<Text>{this.state.position}</Text>/ <Text>{this.state.duration}</Text>
</Col>
</Row>
</div>
</div>
);
}
Example #9
| Source File: SliderWithInput.jsx From ui with MIT License | 5 votes |
|
SliderWithInput = (props) => {
const {
min, max, value, onUpdate, disabled, step,
} = props;
const [, handleChange] = useUpdateThrottled(onUpdate, value);
const [localValue, setLocalValue] = useState(value);
const debouncedOnChange = useCallback(
_.debounce((changedValue) => handleChange(changedValue), 1000), [],
);
useEffect(() => {
setLocalValue(parseFloat(value));
}, [value]);
const stepToSet = step ?? max / 200;
return (
<div style={{ display: 'flex', whiteSpace: 'nowrap' }}>
<Slider
value={localValue}
min={min}
max={max}
onChange={setLocalValue}
onAfterChange={() => handleChange(localValue)}
step={stepToSet}
disabled={disabled}
style={{ minWidth: 100, display: 'inline-block', flexGrow: 100 }}
/>
<InputNumber
value={localValue}
min={min}
max={max}
onChange={(changedValue) => {
if (changedValue === value) { return; }
const changedValueWithinBounds = Math.min(Math.max(changedValue, min), max);
setLocalValue(changedValueWithinBounds);
debouncedOnChange(changedValueWithinBounds);
}}
onPressEnter={() => { handleChange(localValue); }}
onStep={(newValue) => {
handleChange(newValue);
}}
step={stepToSet}
disabled={disabled}
style={{ width: 80, display: 'inline-block' }}
/>
</div>
);
}
Example #10
| Source File: BasicSetting.js From network-rc with Apache License 2.0 | 5 votes |
|
export default function UISetting({ saveServerConfig, serverConfig }) {
const { channelList = [] } = serverConfig;
return (
<Form {...layout} onFinish={saveServerConfig} initialValues={serverConfig}>
<Form.Item
label="油门通道"
name={["specialChannel", "speed"]}
extra="自动刹车需要正确设置此通道"
>
<Select>
{channelList
.filter(({ type }) => type === "pwm")
.map(({ id, name, pin }) => (
<Option value={id} key={id}>
{" "}
{name}(GPIO:{pin}){" "}
</Option>
))}
</Select>
</Form.Item>
<Form.Item label="方向通道" name={["specialChannel", "direction"]}>
<Select>
{channelList
.filter(({ type }) => type === "pwm")
.map(({ id, name, pin }) => (
<Option value={id} key={id}>
{" "}
{name}(GPIO:{pin}){" "}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
label="自动刹车延迟阀值"
name="autoLockTime"
extra="毫秒，网络延迟超过设定值时刹车"
>
<Slider max={3000} />
</Form.Item>
<Form.Item
label="延迟刹车时长"
name="brakeTime"
extra="毫秒，设为 0 时仅复位通道"
>
<Slider max={1000} />
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
保存
</Button>
</Form.Item>
</Form>
);
}
Example #11
| Source File: App.jsx From antd-theming-examples with MIT License | 5 votes |
|
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Ant design theming examples</h1>
</header>
<p className="App-intro">
Trying out what{" "}
<a href="https://ant.design/docs/react/customize-theme">the docs</a>{" "}
tell us.
</p>
<p>
<Select
defaultValue="lucy"
size="large"
onChange={value => console.log(value)}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
</p>
<p>
<Radio.Group defaultValue="a" buttonStyle="solid">
<Radio.Button value="a">Hangzhou</Radio.Button>
<Radio.Button value="b" disabled>
Shanghai
</Radio.Button>
<Radio.Button value="c">Beijing</Radio.Button>
<Radio.Button value="d">Chengdu</Radio.Button>
</Radio.Group>
</p>
<p>
<Slider defaultValue={30} />
</p>
</div>
);
}
Example #12
| Source File: playground.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
const { gutterKey, vgutterKey, colCountKey } = this.state;
const cols = [];
const colCount = colCounts[colCountKey];
let colCode = '';
for (let i = 0; i < colCount; i++) {
cols.push(
<Col key={i.toString()} span={24 / colCount}>
<div>Column</div>
</Col>,
);
colCode += ` <Col span={${24 / colCount}} />\n`;
}
return (
<>
<span>Horizontal Gutter (px): </span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(gutters).length - 1}
value={gutterKey}
onChange={this.onGutterChange}
marks={gutters}
step={null}
tipFormatter={value => gutters[value]}
/>
</div>
<span>Vertical Gutter (px): </span>
<div style={{ width: '50%' }}>
<Slider
min={0}
max={Object.keys(vgutters).length - 1}
value={vgutterKey}
onChange={this.onVGutterChange}
marks={vgutters}
step={null}
tipFormatter={value => vgutters[value]}
/>
</div>
<span>Column Count:</span>
<div style={{ width: '50%', marginBottom: 48 }}>
<Slider
min={0}
max={Object.keys(colCounts).length - 1}
value={colCountKey}
onChange={this.onColCountChange}
marks={colCounts}
step={null}
tipFormatter={value => colCounts[value]}
/>
</div>
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
{cols}
{cols}
</Row>
Another Row:
<Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
<pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
</>
);
}
Example #13
| Source File: index.js From acy-dex-interface with MIT License | 4 votes |
|
OptionComponent = props => {
const {
mode,
setMode,
volume,
setVolume,
percentage,
setPercentage,
} = props
const {
account,
library,
chainId,
} = useConstantLoader(props);
const optionMode = ['Buy', 'Sell']
const modeSelect = mode => {
setMode(mode)
}
const [leverageOption, setLeverageOption] = useLocalStorageSerializeKey([chainId, "Option-leverage-value"], "2");
const leverageMarks = {
1: {
style: { color: '#b5b6b6', },
label: '1x'
},
5: {
style: { color: '#b5b6b6', },
label: '5x'
},
10: {
style: { color: '#b5b6b6', },
label: '10x'
},
15: {
style: { color: '#b5b6b6', },
label: '15x'
},
20: {
style: { color: '#b5b6b6', },
label: '20x'
},
25: {
style: { color: '#b5b6b6', },
label: '25x'
},
30: {
style: { color: '#b5b6b6', },
label: '30x'
}
};
const StyledSlider = styled(Slider)`
.ant-slider-track {
background: #929293;
height: 3px;
}
.ant-slider-rail {
background: #29292c;
height: 3px;
}
.ant-slider-handle {
background: #929293;
width: 12px;
height: 12px;
border: none;
}
.ant-slider-handle-active {
background: #929293;
width: 12px;
height: 12px;
border: none;
}
.ant-slider-dot {
border: 1.5px solid #29292c;
border-radius: 1px;
background: #29292c;
width: 2px;
height: 10px;
}
.ant-slider-dot-active {
border: 1.5px solid #929293;
border-radius: 1px;
background: #929293;
width: 2px;
height: 10px;
}
.ant-slider-with-marks {
margin-bottom: 50px;
}
`;
const getPercentageButton = value => {
if (percentage != value) {
return (
<button
className={styles.percentageButton}
onClick={() => { setPercentage(value) }}>
{value}
</button>
)
} else {
return (
<button
className={styles.percentageButtonActive}
onClick={() => { setPercentage(value) }}>
{value}
</button>
)
}
}
const getPrimaryText = () => {
if (mode == 'Buy') {
return 'Buy / Long'
} else {
return 'Sell / Short'
}
}
const onClickPrimary = () => {
}
return (
<div className={styles.main}>
<AcyPerpetualCard style={{ backgroundColor: 'transparent', border: 'none', margin: '-8px' }}>
<div className={styles.modeSelector}>
<PerpetualTabs
option={mode}
options={optionMode}
onChange={modeSelect}
/>
</div>
<div className={styles.rowFlexContainer}>
<span className={styles.title}>Set Volume</span>
<div className={styles.inputContainer}>
<input
type="number"
min="0"
placeholder="0.0"
className={styles.optionInput}
value={volume}
onChange={e => { setVolume(e.target.value) }}
/>
<span className={styles.inputLabel}>USD</span>
</div>
<AcyDescriptions>
<div className={styles.leverageContainer}>
<div className={styles.slippageContainer}>
<div className={styles.leverageLabel}>
<span>Leverage</span>
<div className={styles.leverageInputContainer}>
<button
className={styles.leverageButton}
onClick={() => {
if (leverageOption > 0.1) {
setLeverageOption((parseFloat(leverageOption) - 0.1).toFixed(1))
}
}}
>
<span> - </span>
</button>
<input
type="number"
min={0.1}
max={30.5}
value={leverageOption}
onChange={e => {
let val = parseFloat(e.target.value.replace(/^(-)*(\d+)\.(\d).*$/, '$1$2.$3')).toFixed(1)
if (val >= 0.1 && val <= 30.5) {
setLeverageOption(val)
}
}}
className={styles.leverageInput}
/>
<button
className={styles.leverageButton}
onClick={() => {
if (leverageOption < 30.5) {
setLeverageOption((parseFloat(leverageOption) + 0.1).toFixed(1))
}
}}
>
<span> + </span>
</button>
</div>
</div>
</div>
<StyledSlider
min={0.1}
max={30.5}
step={0.1}
marks={leverageMarks}
value={leverageOption}
onChange={value => setLeverageOption(value)}
defaultValue={leverageOption}
/>
</div>
</AcyDescriptions>
<div className={styles.buttonContainer}>
{getPercentageButton('25%')}
{getPercentageButton('50%')}
{getPercentageButton('75%')}
{getPercentageButton('100%')}
</div>
<AcyPerpetualButton
style={{ margin: '25px 0 0 0', width: '100%' }}
onClick={onClickPrimary}
>
{getPrimaryText()}
</AcyPerpetualButton>
</div>
</AcyPerpetualCard>
</div>
);
}
Example #14
| Source File: InfoHeader.js From henan-rescue-viz-website with MIT License | 4 votes |
|
function InfoHeader(props) {
const [isFold, setIsFold] = useState(false)
const [timeRange, setTimeRange] = useState(8)
const [displayList, setDisplayList] = useState([])
const [selectedId, setSelectedId] = useState('')
const [dataSource, setDataSource] = useState('weibo')
const [types, setTypes] = useState([])
useEffect(() => {
if (props.bounds == null) return
const list = props.list.filter(e => props.bounds.containsPoint(e.location))
setDisplayList(list)
}, [props.list, props.bounds])
const onLeftFold = useCallback((e) => {
e.stopPropagation();
setIsFold(!isFold);
}, [isFold])
const handleSliderChange = (value) => {
setTimeRange(value)
props.notifySliderChange(value)
}
const handleItemClicked = (item) => {
setSelectedId(item.id)
props.handleItemClick(item)
}
let handleSouceSwitched = (event) => {
setDataSource(event.target.value)
props.notifyDataSourceSwitch(event.target.value)
}
let souceSwitch = () => {
return <Row className="source-switch" justify="center">
<Col style={{ marginTop: 5 }}>信息来源：</Col>
<Col>
<Radio.Group defaultValue="weibo" buttonStyle="solid" onChange={handleSouceSwitched}>
<Radio.Button value="weibo">微博</Radio.Button>
<Radio.Button value="sheet">在线表格</Radio.Button>
</Radio.Group></Col>
</Row>
}
let headerText = () => {
if (dataSource === 'weibo') {
return <label>本网站仅聚合新浪微博上发布的
有关2021年7月河南暴雨的求助信息，请大家注意辨别信息真伪。
点击标记点可以看到更多信息及原微博地址。</label>
} else {
return <label>在线表格信息来源于志愿者们手工整理有关2021年7月河南暴雨的求助信息, 跳转到
<a href="https://u9u37118bj.feishu.cn/sheets/shtcnemn0sOgZ5Y9Cvp027wHWYd?from=from_copylink" target="_blank" rel="noreferrer">文档地址</a>
(由于有的信息地址不全，地图上的位置可能会有出入) </label>
}
}
const handleCategoryChange = (value) => {
setTypes(CATEGORY_MAP[value] || [])
props.notifyCategoryChange(value)
}
const categories = Object.keys(CATEGORY_MAP)
let slider = () => {
if (dataSource === 'sheet') {
return null
}
let labelText = "最近" + timeRange + "小时";
if (timeRange === 12) {
labelText = "全部记录"
}
return <div className="slider-container">
<Row justify="center" align="middle">
<Col span={12}>
<Slider defaultValue={8} step={2} min={2} max={12} onAfterChange={handleSliderChange}/>
</Col>
<Col className="label-col" span={6}>
<label>{labelText}</label>
</Col>
</Row>
<div className="info-button-list">
<Button type="primary" href="https://u9u37118bj.feishu.cn/docs/doccn3QzzbeQLPQwNSb4Hcl2X1g" target="_blank">关于我们</Button>
<Button type="primary" href="https://u9u37118bj.feishu.cn/sheets/shtcnh4177SPTo2N8NglZHCirDe" target="_blank">实时数据表格</Button>
<Button type="primary" href="https://www.wjx.cn/vj/PZb53C6.aspx" target="_blank">需求反馈</Button>
</div>
</div>
}
return (
<div className="info-container" data-fold={isFold}>
<div className="info" data-fold={isFold}>
{souceSwitch()}
<div>{headerText()}</div>
<br />
{slider()}
</div>
<div className="info-list-header">
<Input placeholder="搜索"
className="info-list-search"
value={props.keyword}
onChange={ e => props.notifyKeywordChange(e.target.value) }
allowClear
prefix={<SearchOutlined className="info-list-search-icon"/>}
style={{ }}
/>
<Select defaultValue='' className="info-list-category" style={{}} onChange={handleCategoryChange}>
<Option value={''}>全选</Option>
{ categories.map(category => <Option value={category} key={category}>{category}</Option>) }
</Select>
<Select mode="multiple"
className="info-list-types"
value={props.selectedTypes}
defaultValue={[]}
showSearch={false}
allowClear
style={{ }}
disabled={types.length === 0}
onChange={value => props.notifyTypesChange(value)}>
{types.map(type => (
<Option key={type}>{type}</Option>
))}
</Select>
</div>
<List
className="info-list"
itemLayout="horizontal"
bordered
dataSource={displayList}
locale={ { emptyText: props.defaultText } }
renderItem={item => (
<List.Item key={item.id} className={item.id === selectedId ? "selected-item" : ''} onClick={ () => { handleItemClicked(item) } }>
<InfoItem info={item} handleCorrection={props.handleCorrection}/>
</List.Item>
)}
/>
<div className="left-fold" data-fold={isFold} onClick={onLeftFold}>{LEFT_FOLD}</div>
</div>
)
}
Example #15
| Source File: SubscriptionCard.js From Cowin-Notification-System with MIT License | 4 votes |
|
SubscriptionCard = (props) => {
const {
errors,
subscription: {
stateId,
districtId,
vaccine,
ageGroup,
districts,
districtLoader,
pincodeDistance,
pincode,
dose,
}
} = props;
return (
<Card className='margin--bottom border-round' bodyStyle={{paddingLeft: '12px', paddingRight: '12px'}}>
<CloseCircleFilled
className='f18'
style={{position: 'absolute', top: '-3%', right: '-2%', color: '#8B0000' }}
onClick={() => props.onRemoveSubscription()}
/>
<>
<div className='label'> Vaccination Type: </div>
<Radio.Group className='width-100' value={vaccine} onChange={(e) => props.onChangeSubscriptionField({'vaccine': e.target.value })}>
<Radio.Button style={{width: '22%' }} className='f10 margin-half--right center' value="covaxin">Covaxin</Radio.Button>
<Radio.Button style={{width: '22%' }} className='f10 margin-half--right center' value="covishield">Covishield</Radio.Button>
<Radio.Button style={{width: '22%' }} className='f10 margin-half--right center' value="sputnik v">SputnikV</Radio.Button>
<Radio.Button style={{width: '22%' }} className='f10 center' value="both">All</Radio.Button>
</Radio.Group>
<div className='label'> Age Group: </div>
<Radio.Group className='width-100' value={ageGroup} onChange={(e) => props.onChangeSubscriptionField({'ageGroup': e.target.value })}>
<Radio.Button style={{width: '29.8%' }} className='f10 margin-half--right center' value="above_18">18-45</Radio.Button>
<Radio.Button style={{width: '29.8%' }} className='f10 margin-half--right center' value="above_45">Above-45</Radio.Button>
<Radio.Button style={{width: '29.8%' }} className='f10 center' value="both">Both</Radio.Button>
</Radio.Group>
<div className='label'> Dose: </div>
<Radio.Group className='width-100' value={dose} onChange={(e) => props.onChangeSubscriptionField({'dose': e.target.value })}>
<Radio.Button style={{width: '45.5%' }} className='f10 margin-half--right center' value="dose_1">Dose-1</Radio.Button>
<Radio.Button style={{width: '45.5%' }} className='f10 margin-half--right center' value="dose_2">Dose-2</Radio.Button>
</Radio.Group>
</>
<div className='label'> Select a type of subscription: </div>
<Tabs onChange={(value) => props.onChangeSubscriptionField({ type: value })} type="card">
<TabPane tab="Pincode Based" key="pincode">
<div className='padding-double--sides'>
<div className='label'>Pincode:</div>
<ErrorMessage message={errors.pincode} />
<Input autoComplete='off' name='pincode' block='true' value={pincode} onChange={(e) => props.onChangeSubscriptionField({'pincode': e.target.value})} />
<div className='label'> Distance Radius from Pincode (in Km): </div>
<Slider
marks={distanceSliderMarks}
step={null}
defaultValue={5}
value={pincodeDistance}
max={50}
min={5}
onChange={(value) => props.onChangeSubscriptionField({'pincodeDistance': value})}
/>
</div>
</TabPane>
<TabPane tab="District Based" key="district">
<div className='padding-double--sides'>
<Row>
<Col span={12}>
<div className='label'> State: </div>
<Select value={stateId} style={{ width: '90%' }} onChange={(value) => {
props.onChangeSubscriptionField({'stateId': value});
props.fetchDistricts(value);
}}>
{
props.states.length === 0 ?
<Option key={-99999}> <Loader /> </Option> :
props.states.map((state, index) => {
return (
<Option key={index} value={state.stateId}> {state.stateName} </Option>
)
})
}
</Select>
<ErrorMessage message={errors.stateId} />
</Col>
<Col span={12}>
<div className='label'> District: </div>
<Select value={districtId} style={{ width: '90%' }} onChange={(value) => {
props.onChangeSubscriptionField({'districtId': value});
}}>
{
districtLoader ?
<Option key={-99999}> <Loader /> </Option> :
districts.map((district, index) => {
return (
<Option key={index} value={district.districtId}> {district.districtName} </Option>
)
})
}
</Select>
<ErrorMessage message={errors.districtId} />
</Col>
</Row>
</div>
</TabPane>
</Tabs>
</Card>
);
}
Example #16
| Source File: ExampleUI.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
export default function ExampleUI({
purpose,
setPurposeEvents,
address,
mainnetProvider,
localProvider,
yourLocalBalance,
price,
tx,
readContracts,
writeContracts,
}) {
const [newPurpose, setNewPurpose] = useState("loading...");
return (
<div>
{/*
⚙️ Here is an example UI that displays and sets the purpose in your smart contract:
*/}
<div style={{ border: "1px solid #cccccc", padding: 16, width: 400, margin: "auto", marginTop: 64 }}>
<h2>Example UI:</h2>
<h4>purpose: {purpose}</h4>
<Divider />
<div style={{ margin: 8 }}>
<Input
onChange={e => {
setNewPurpose(e.target.value);
}}
/>
<Button
style={{ marginTop: 8 }}
onClick={async () => {
/* look how you call setPurpose on your contract: */
/* notice how you pass a call back for tx updates too */
const result = tx(writeContracts.YourContract.setPurpose(newPurpose), update => {
console.log("? Transaction Update:", update);
if (update && (update.status === "confirmed" || update.status === 1)) {
console.log(" ? Transaction " + update.hash + " finished!");
console.log(
" ⛽️ " +
update.gasUsed +
"/" +
(update.gasLimit || update.gas) +
" @ " +
parseFloat(update.gasPrice) / 1000000000 +
" gwei",
);
}
});
console.log("awaiting metamask/web3 confirm result...", result);
console.log(await result);
}}
>
Set Purpose!
</Button>
</div>
<Divider />
Your Address:
<Address address={address} ensProvider={mainnetProvider} fontSize={16} />
<Divider />
ENS Address Example:
<Address
address="0x34aA3F359A9D614239015126635CE7732c18fDF3" /* this will show as austingriffith.eth */
ensProvider={mainnetProvider}
fontSize={16}
/>
<Divider />
{/* use utils.formatEther to display a BigNumber: */}
<h2>Your Balance: {yourLocalBalance ? utils.formatEther(yourLocalBalance) : "..."}</h2>
<div>OR</div>
<Balance address={address} provider={localProvider} price={price} />
<Divider />
<div>? Example Whale Balance:</div>
<Balance balance={utils.parseEther("1000")} provider={localProvider} price={price} />
<Divider />
{/* use utils.formatEther to display a BigNumber: */}
<h2>Your Balance: {yourLocalBalance ? utils.formatEther(yourLocalBalance) : "..."}</h2>
<Divider />
Your Contract Address:
<Address
address={readContracts && readContracts.YourContract ? readContracts.YourContract.address : null}
ensProvider={mainnetProvider}
fontSize={16}
/>
<Divider />
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/* look how you call setPurpose on your contract: */
tx(writeContracts.YourContract.setPurpose("? Cheers"));
}}
>
Set Purpose to "? Cheers"
</Button>
</div>
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/*
you can also just craft a transaction and send it to the tx() transactor
here we are sending value straight to the contract's address:
*/
tx({
to: writeContracts.YourContract.address,
value: utils.parseEther("0.001"),
});
/* this should throw an error about "no fallback nor receive function" until you add it */
}}
>
Send Value
</Button>
</div>
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/* look how we call setPurpose AND send some value along */
tx(
writeContracts.YourContract.setPurpose("? Paying for this one!", {
value: utils.parseEther("0.001"),
}),
);
/* this will fail until you make the setPurpose function payable */
}}
>
Set Purpose With Value
</Button>
</div>
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/* you can also just craft a transaction and send it to the tx() transactor */
tx({
to: writeContracts.YourContract.address,
value: utils.parseEther("0.001"),
data: writeContracts.YourContract.interface.encodeFunctionData("setPurpose(string)", [
"? Whoa so 1337!",
]),
});
/* this should throw an error about "no fallback nor receive function" until you add it */
}}
>
Another Example
</Button>
</div>
</div>
{/*
? Maybe display a list of events?
(uncomment the event and emit line in YourContract.sol! )
*/}
<div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
<h2>Events:</h2>
<List
bordered
dataSource={setPurposeEvents}
renderItem={item => {
return (
<List.Item key={item.blockNumber + "_" + item.sender + "_" + item.purpose}>
<Address address={item[0]} ensProvider={mainnetProvider} fontSize={16} />
{item[1]}
</List.Item>
);
}}
/>
</div>
<div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 256 }}>
<Card>
Check out all the{" "}
<a
href="https://github.com/austintgriffith/scaffold-eth/tree/master/packages/react-app/src/components"
target="_blank"
rel="noopener noreferrer"
>
? components
</a>
</Card>
<Card style={{ marginTop: 32 }}>
<div>
There are tons of generic components included from{" "}
<a href="https://ant.design/components/overview/" target="_blank" rel="noopener noreferrer">
? ant.design
</a>{" "}
too!
</div>
<div style={{ marginTop: 8 }}>
<Button type="primary">Buttons</Button>
</div>
<div style={{ marginTop: 8 }}>
<SyncOutlined spin /> Icons
</div>
<div style={{ marginTop: 8 }}>
Date Pickers?
<div style={{ marginTop: 2 }}>
<DatePicker onChange={() => {}} />
</div>
</div>
<div style={{ marginTop: 32 }}>
<Slider range defaultValue={[20, 50]} onChange={() => {}} />
</div>
<div style={{ marginTop: 32 }}>
<Switch defaultChecked onChange={() => {}} />
</div>
<div style={{ marginTop: 32 }}>
<Progress percent={50} status="active" />
</div>
<div style={{ marginTop: 32 }}>
<Spin />
</div>
</Card>
</div>
</div>
);
}
Example #17
| Source File: submission.js From deadviz with MIT License | 4 votes |
|
Submission = ({ onSubmit }) => {
const [form] = Form.useForm();
const onFinish = values => {
onSubmit(values);
form.resetFields();
};
return (
<StyledForm
requiredMark={false}
form={form}
onFinish={onFinish}>
<Form.Item name="name" label={
<span>
Name
<Tooltip title="What's your plan/goal?">
<QuestionCircleOutlined />
</Tooltip>
</span>
} hasFeedback rules={[{ required: true, message: 'Please input your plan/goal', whitespace: true }]}>
<Input placeholder="My ultimate goal" />
</Form.Item>
<Form.Item name="start" label={
<span>
Start
<Tooltip title="Goal's Start Date">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
initialValue={dayjs()}
hasFeedback
dependencies={['end']}
rules={[
{ type: 'object', required: true, message: 'Please select start time' },
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('end') > value) {
return Promise.resolve();
}
return Promise.reject('The start date should be before end date');
},
})]}>
<DatePicker initialValues={dayjs()} className="full-width" />
</Form.Item>
<Form.Item name="end" label={
<span>
End
<Tooltip title="Goal's End Date">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
hasFeedback
initialValue={dayjs().add(1, 'y')}
dependencies={['start']}
rules={[
{ type: 'object', required: true, message: 'Please select end time' },
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('start') < value) {
return Promise.resolve();
}
return Promise.reject('The end date should be after start date');
},
})]}>
<DatePicker initialValues={dayjs().add(1, 'y')} className="full-width" />
</Form.Item>
<Form.Item name="priority" style={{ width: '100%' }} hasFeedback
label={
<span>
Priority
<Tooltip title="Goal's Priority">
<QuestionCircleOutlined />
</Tooltip>
</span>
}>
<Slider style={{ width: '85%' }} defaultValue={0.5} max={1.0} min={0.0} marks={false} step={0.01} />
</Form.Item>
<Form.Item>
<StyledButton size="large" icon={<UnorderedListOutlined />} shape="round" className="centered" type="primary"
htmlType="submit">
Add to List
</StyledButton>
</Form.Item>
</StyledForm>
);
}
Example #18
| Source File: ExampleUI.jsx From moonshot with MIT License | 4 votes |
|
export default function ExampleUI({purpose, setPurposeEvents, address, mainnetProvider, userProvider, localProvider, yourLocalBalance, price, tx, readContracts, writeContracts }) {
const [newPurpose, setNewPurpose] = useState("loading...");
return (
<div>
{/*
⚙️ Here is an example UI that displays and sets the purpose in your smart contract:
*/}
<div style={{border:"1px solid #cccccc", padding:16, width:400, margin:"auto",marginTop:64}}>
<h2>Example UI:</h2>
<h4>purpose: {purpose}</h4>
<Divider/>
<div style={{margin:8}}>
<Input onChange={(e)=>{setNewPurpose(e.target.value)}} />
<Button onClick={()=>{
console.log("newPurpose",newPurpose)
/* look how you call setPurpose on your contract: */
tx( writeContracts.YourContract.setPurpose(newPurpose) )
}}>Set Purpose</Button>
</div>
<Divider />
Your Address:
<Address
address={address}
ensProvider={mainnetProvider}
fontSize={16}
/>
<Divider />
ENS Address Example:
<Address
address={"0x34aA3F359A9D614239015126635CE7732c18fDF3"} /* this will show as austingriffith.eth */
ensProvider={mainnetProvider}
fontSize={16}
/>
<Divider/>
{ /* use formatEther to display a BigNumber: */ }
<h2>Your Balance: {yourLocalBalance?formatEther(yourLocalBalance):"..."}</h2>
<div>OR</div>
<Balance
address={address}
provider={localProvider}
price={price}
/>
<Divider/>
<div>? Example Whale Balance:</div>
<Balance
balance={parseEther("1000")}
provider={localProvider}
price={price}
/>
<Divider/>
{ /* use formatEther to display a BigNumber: */ }
<h2>Your Balance: {yourLocalBalance?formatEther(yourLocalBalance):"..."}</h2>
<Divider/>
Your Contract Address:
<Address
address={readContracts?readContracts.YourContract.address:readContracts}
ensProvider={mainnetProvider}
fontSize={16}
/>
<Divider />
<div style={{margin:8}}>
<Button onClick={()=>{
/* look how you call setPurpose on your contract: */
tx( writeContracts.YourContract.setPurpose("? Cheers") )
}}>Set Purpose to "? Cheers"</Button>
</div>
<div style={{margin:8}}>
<Button onClick={()=>{
/*
you can also just craft a transaction and send it to the tx() transactor
here we are sending value straight to the contract's address:
*/
tx({
to: writeContracts.YourContract.address,
value: parseEther("0.001")
});
/* this should throw an error about "no fallback nor receive function" until you add it */
}}>Send Value</Button>
</div>
<div style={{margin:8}}>
<Button onClick={()=>{
/* look how we call setPurpose AND send some value along */
tx( writeContracts.YourContract.setPurpose("? Paying for this one!",{
value: parseEther("0.001")
}))
/* this will fail until you make the setPurpose function payable */
}}>Set Purpose With Value</Button>
</div>
<div style={{margin:8}}>
<Button onClick={()=>{
/* you can also just craft a transaction and send it to the tx() transactor */
tx({
to: writeContracts.YourContract.address,
value: parseEther("0.001"),
data: writeContracts.YourContract.interface.encodeFunctionData("setPurpose(string)",["? Whoa so 1337!"])
});
/* this should throw an error about "no fallback nor receive function" until you add it */
}}>Another Example</Button>
</div>
</div>
{/*
? Maybe display a list of events?
(uncomment the event and emit line in YourContract.sol! )
*/}
<div style={{ width:600, margin: "auto", marginTop:32, paddingBottom:32 }}>
<h2>Events:</h2>
<List
bordered
dataSource={setPurposeEvents}
renderItem={(item) => {
return (
<List.Item key={item.blockNumber+"_"+item.sender+"_"+item.purpose}>
<Address
address={item[0]}
ensProvider={mainnetProvider}
fontSize={16}
/> =>
{item[1]}
</List.Item>
)
}}
/>
</div>
<div style={{ width:600, margin: "auto", marginTop:32, paddingBottom:256 }}>
<Card>
Check out all the <a href="https://github.com/austintgriffith/scaffold-eth/tree/master/packages/react-app/src/components" target="_blank" rel="noopener noreferrer">? components</a>
</Card>
<Card style={{marginTop:32}}>
<div>
There are tons of generic components included from <a href="https://ant.design/components/overview/" target="_blank" rel="noopener noreferrer">? ant.design</a> too!
</div>
<div style={{marginTop:8}}>
<Button type="primary">
Buttons
</Button>
</div>
<div style={{marginTop:8}}>
<SyncOutlined spin /> Icons
</div>
<div style={{marginTop:8}}>
Date Pickers?
<div style={{marginTop:2}}>
<DatePicker onChange={()=>{}}/>
</div>
</div>
<div style={{marginTop:32}}>
<Slider range defaultValue={[20, 50]} onChange={()=>{}}/>
</div>
<div style={{marginTop:32}}>
<Switch defaultChecked onChange={()=>{}} />
</div>
<div style={{marginTop:32}}>
<Progress percent={50} status="active" />
</div>
<div style={{marginTop:32}}>
<Spin />
</div>
</Card>
</div>
</div>
);
}
Example #19
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
Sidebar = ({
dispatch,
isSidebarOpen,
isMenuCollapsed,
isMenuShadow,
isMenuUnfixed,
menuLayoutType,
menuColor,
authPagesColor,
isTopbarFixed,
isContentMaxWidth,
isAppMaxWidth,
isGrayBackground,
isGrayTopbar,
isCardShadow,
isSquaredBorders,
isBorderless,
routerAnimation,
locale,
theme,
primaryColor,
leftMenuWidth,
logo,
}) => {
const [defaultColor] = useState('#4b7cf3')
const selectColor = debounce(color => {
dispatch({
type: 'settings/SET_PRIMARY_COLOR',
payload: {
color,
},
})
}, 200)
const setTheme = nextTheme => {
dispatch({
type: 'settings/SET_THEME',
payload: {
theme: nextTheme,
},
})
dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting: 'menuColor',
value: nextTheme === 'dark' ? 'dark' : 'light',
},
})
}
const resetColor = () => {
dispatch({
type: 'settings/SET_PRIMARY_COLOR',
payload: {
color: defaultColor,
},
})
}
const changeSetting = (setting, value) => {
dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting,
value,
},
})
}
const toggleSettings = e => {
e.preventDefault()
dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting: 'isSidebarOpen',
value: !isSidebarOpen,
},
})
}
const selectMenuLayoutType = e => {
const { value } = e.target
dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting: 'menuLayoutType',
value,
},
})
}
const colorPickerHandler = (e, setting, value) => {
e.preventDefault()
dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting,
value,
},
})
}
const selectRouterAnimation = value => {
dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting: 'routerAnimation',
value,
},
})
}
const selectLocale = value => {
dispatch({
type: 'settings/CHANGE_SETTING',
payload: {
setting: 'locale',
value,
},
})
}
const ColorPicker = props => {
return props.colors.map(item => {
return (
<a
href="#"
key={item}
onClick={e => colorPickerHandler(e, props.setting, item)}
className={classNames(`${style.cui__sidebar__select__item}`, {
[style.cui__sidebar__select__item__active]: props.value === item,
[style.cui__sidebar__select__item__black]: item === 'dark',
[style.cui__sidebar__select__item__white]: item === 'white',
[style.cui__sidebar__select__item__gray]: item === 'gray',
[style.cui__sidebar__select__item__blue]: item === 'blue',
[style.cui__sidebar__select__item__img]: item === 'image',
})}
/>
)
})
}
return (
<div>
<div
className={classNames(style.cui__sidebar, {
[style.cui__sidebar__toggled]: isSidebarOpen,
})}
>
<PerfectScrollbar>
<div className={style.cui__sidebar__inner}>
<a
href="#"
className={`fe fe-x-circle ${style.cui__sidebar__close}`}
onClick={toggleSettings}
/>
<h5>
<strong>Theme Settings</strong>
</h5>
<div className="cui__utils__line" style={{ marginTop: 25, marginBottom: 30 }} />
<div>
<div className={`${style.cui__sidebar__type} mb-4`}>
<div className={style.cui__sidebar__type__title}>
<span>Application Name</span>
</div>
<div className={style.cui__sidebar__type__items}>
<Input
value={logo}
onChange={e => {
const { value } = e.target
changeSetting('logo', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__type}>
<div className={style.cui__sidebar__type__title}>
<span>Menu Layout</span>
</div>
<div className={style.cui__sidebar__type__items}>
<Radio.Group onChange={selectMenuLayoutType} defaultValue={menuLayoutType}>
<div className="row">
<div className="col-6">
<div className="mb-2">
<Radio value="left">Left Menu</Radio>
</div>
<div className="mb-2">
<Radio value="top">Top Menu</Radio>
</div>
</div>
<div className="col-6">
<div className="mb-2">
<Radio value="nomenu">No menu</Radio>
</div>
</div>
</div>
</Radio.Group>
</div>
</div>
<div className={`${style.cui__sidebar__type} mb-4`}>
<div className={style.cui__sidebar__type__title}>
<span>Router Animation</span>
</div>
<div className={style.cui__sidebar__type__items}>
<Select
defaultValue={routerAnimation}
style={{ width: '100%' }}
onChange={selectRouterAnimation}
>
<Select.Option value="none">None</Select.Option>
<Select.Option value="slide-fadein-up">Slide Up</Select.Option>
<Select.Option value="slide-fadein-right">Slide Right</Select.Option>
<Select.Option value="fadein">Fade In</Select.Option>
<Select.Option value="zoom-fadein">Zoom</Select.Option>
</Select>
</div>
</div>
<div className={`${style.cui__sidebar__type} mb-4`}>
<div className={style.cui__sidebar__type__title}>
<span>Internationalization</span>
</div>
<div className={style.cui__sidebar__type__items}>
<Select value={locale} style={{ width: '100%' }} onChange={selectLocale}>
<Select.Option value="en-US">English (en-US)</Select.Option>
<Select.Option value="fr-FR">French (fr-FR)</Select.Option>
<Select.Option value="ru-RU">Русский (ru-RU)</Select.Option>
<Select.Option value="zh-CN">简体中文 (zh-CN)</Select.Option>
</Select>
</div>
</div>
<div className={`${style.cui__sidebar__type} mb-2`}>
<div className={style.cui__sidebar__type__title}>
<span>Left Menu Width</span>
</div>
<div className={style.cui__sidebar__type__items}>
<Slider
value={leftMenuWidth}
min={256}
max={330}
onChange={value => {
changeSetting('leftMenuWidth', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Left Menu: Collapsed</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isMenuCollapsed}
disabled={menuLayoutType !== 'left'}
onChange={value => {
changeSetting('isMenuCollapsed', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Left Menu: Unfixed</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isMenuUnfixed}
disabled={menuLayoutType !== 'left'}
onChange={value => {
changeSetting('isMenuUnfixed', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Left Menu: Shadow</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isMenuShadow}
onChange={value => {
changeSetting('isMenuShadow', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Menu: Color</div>
<div className={style.cui__sidebar__container}>
<ColorPicker
setting="menuColor"
value={menuColor}
colors={['white', 'gray', 'dark']}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Auth: Background</div>
<div className={style.cui__sidebar__container}>
<ColorPicker
setting="authPagesColor"
value={authPagesColor}
colors={['white', 'gray', 'image']}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Topbar: Fixed</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isTopbarFixed}
onChange={value => {
changeSetting('isTopbarFixed', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Topbar: Gray Background</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isGrayTopbar}
onChange={value => {
changeSetting('isGrayTopbar', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>App: Content Max-Width</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isContentMaxWidth}
onChange={value => {
changeSetting('isContentMaxWidth', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>App: Max-Width</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isAppMaxWidth}
onChange={value => {
changeSetting('isAppMaxWidth', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>App: Gray Background</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isGrayBackground}
onChange={value => {
changeSetting('isGrayBackground', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Cards: Squared Borders</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isSquaredBorders}
onChange={value => {
changeSetting('isSquaredBorders', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Cards: Shadow</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isCardShadow}
onChange={value => {
changeSetting('isCardShadow', value)
}}
/>
</div>
</div>
<div className={style.cui__sidebar__item}>
<div className={style.cui__sidebar__label}>Cards: Borderless</div>
<div className={style.cui__sidebar__container}>
<Switch
checked={isBorderless}
onChange={value => {
changeSetting('isBorderless', value)
}}
/>
</div>
</div>
</div>
</div>
</PerfectScrollbar>
</div>
<Tooltip title="Settings" placement="left">
<a
role="button"
tabIndex="0"
onFocus={e => {
e.preventDefault()
}}
onKeyPress={toggleSettings}
onClick={toggleSettings}
style={{ bottom: 'calc(50% + 120px)' }}
className={style.cui__sidebar__toggleButton}
>
<i className="fe fe-settings" />
</a>
</Tooltip>
<Tooltip title="Switch Dark / Light Theme" placement="left">
<a
role="button"
tabIndex="0"
onFocus={e => {
e.preventDefault()
}}
onKeyPress={() => setTheme(theme === 'default' ? 'dark' : 'default')}
onClick={() => setTheme(theme === 'default' ? 'dark' : 'default')}
style={{ bottom: 'calc(50% + 60px)' }}
className={style.cui__sidebar__toggleButton}
>
{theme === 'default' && <i className="fe fe-moon" />}
{theme !== 'default' && <i className="fe fe-sun" />}
</a>
</Tooltip>
<Tooltip title="Set Primary Color" placement="left">
<a
style={{ bottom: 'calc(50%)' }}
className={`${style.cui__sidebar__toggleButton} ${style.color} ${
primaryColor === defaultColor ? style.reset : ''
}`}
>
<button
type="button"
tabIndex="0"
onFocus={e => {
e.preventDefault()
}}
onKeyPress={resetColor}
onClick={resetColor}
>
<i className="fe fe-x-circle" />
</button>
<input
type="color"
id="colorPicker"
onChange={e => selectColor(e.target.value)}
value={primaryColor}
/>
<i className="fe fe-package" />
</a>
</Tooltip>
<Tooltip title="Documentation" placement="left">
<a
href="https://docs.cleanuitemplate.com"
target="_blank"
rel="noopener noreferrer"
style={{ bottom: 'calc(50% - 60px)' }}
className={style.cui__sidebar__toggleButton}
>
<i className="fe fe-book-open" />
</a>
</Tooltip>
</div>
)
}
Example #20
| Source File: Waveform.js From label-studio-frontend with Apache License 2.0 | 4 votes |
|
render() {
const self = this;
const speeds = ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"];
return (
<div>
<div id="wave" ref={this.setWaveformRef} className={styles.wave} />
<div id="timeline" />
{this.props.zoom && (
<Row gutter={16} style={{ marginTop: "1em" }}>
<Col flex={8} style={{ textAlign: "right", marginTop: "6px" }}>
<div style={{ display: "flex" }}>
<div style={{ marginTop: "6px", marginRight: "5px" }}>
<Tooltip placement="topLeft" title="Horizontal zoom out">
<ZoomOutOutlined onClick={this.onZoomMinus} className={globalStyles.link} />
</Tooltip>
</div>
<div style={{ width: "100%" }}>
<Slider
min={0}
step={10}
max={500}
value={typeof this.state.zoom === "number" ? this.state.zoom : 0}
onChange={value => {
this.onChangeZoom(value);
}}
/>
</div>
<div style={{ marginTop: "6px", marginLeft: "5px" }}>
<Tooltip placement="topLeft" title="Horizontal zoom in">
<ZoomInOutlined onClick={this.onZoomPlus} className={globalStyles.link} />
</Tooltip>
</div>
</div>
</Col>
<Col flex={4} style={{ textAlign: "right", marginTop: "6px" }}>
<div style={{ display: "flex" }}>
<div style={{ marginTop: "6px", marginRight: "5px" }}>
<Tooltip placement="topLeft" title="Vertical zoom out">
<ZoomOutOutlined onClick={this.onZoomYMinus} className={globalStyles.link} />
</Tooltip>
</div>
<div style={{ width: "100%" }}>
<Slider
min={MIN_ZOOM_Y}
step={.1}
max={MAX_ZOOM_Y}
value={typeof this.state.zoomY === "number" ? this.state.zoomY : MIN_ZOOM_Y}
onChange={value => {
this.onChangeZoomY(value);
}}
/>
</div>
<div style={{ marginTop: "6px", marginLeft: "5px" }}>
<Tooltip placement="topLeft" title="Vertical zoom in">
<ZoomInOutlined onClick={this.onZoomYPlus} className={globalStyles.link} />
</Tooltip>
</div>
</div>
</Col>
<Col flex={3}>
{this.props.volume && (
<div style={{ display: "flex", marginTop: "6.5px" }}>
<div style={{ width: "100%" }}>
<Slider
min={0}
max={1}
step={0.1}
value={typeof this.state.volume === "number" ? this.state.volume : 1}
onChange={value => {
this.onChangeVolume(value);
}}
/>
</div>
<div style={{ marginLeft: "10px", marginTop: "5px" }}>
<SoundOutlined />
</div>
</div>
)}
</Col>
<Col flex={1} style={{ marginTop: "6px" }}>
{this.props.speed && (
<Select
placeholder="Speed"
style={{ width: "100%" }}
defaultValue={this.state.speed}
onChange={self.onChangeSpeed}
>
{speeds.map(speed => (
<Select.Option value={+speed} key={speed}>
Speed {speed}
</Select.Option>
))}
</Select>
)}
</Col>
</Row>
)}
</div>
);
}
Example #21
| Source File: AxesDesign.jsx From ui with MIT License | 4 votes |
|
AxesDesign = (props) => {
const { onUpdate, config } = props;
const [newConfig, handleChange] = useUpdateThrottled(onUpdate, config, 200);
return (
<Form
size='small'
labelCol={{ span: 8 }}
wrapperCol={{ span: 12 }}
>
<p><strong>Axes Settings</strong></p>
<Form.Item label='X-Axis Title'>
<Input
value={config.axes.xAxisText}
onChange={(e) => {
handleChange({
axes: {
xAxisText: e.target.value,
defaultValues: _.without(config.axes.defaultValues, 'x'),
},
});
}}
/>
</Form.Item>
<Form.Item label='Y-Axis Title'>
<Input
value={config.axes.yAxisText}
onChange={(e) => {
handleChange({
axes: {
yAxisText: e.target.value,
defaultValues: _.without(config.axes.defaultValues, 'y'),
},
});
}}
/>
</Form.Item>
<Form.Item label='Axes Title Size'>
<Slider
value={newConfig.axes.titleFontSize}
min={5}
max={21}
onChange={(value) => {
handleChange({ axes: { titleFontSize: value } });
}}
marks={{ 5: 5, 21: 21 }}
/>
</Form.Item>
<Form.Item label='Rotate X-Axis Labels'>
<Switch
checked={newConfig.axes.xAxisRotateLabels}
onChange={(checked) => {
handleChange({ axes: { xAxisRotateLabels: checked } });
}}
/>
</Form.Item>
<Form.Item label='Axes Label Size'>
<Slider
value={newConfig.axes.labelFontSize}
min={5}
max={21}
onChange={(value) => {
handleChange({ axes: { labelFontSize: value } });
}}
marks={{ 5: 5, 21: 21 }}
/>
</Form.Item>
<Form.Item label='Offset Margins'>
<Slider
value={newConfig.axes.offset}
min={0}
max={20}
onChange={(value) => {
handleChange({ axes: { offset: value } });
}}
marks={{ 0: 0, 20: 20 }}
/>
</Form.Item>
<Form.Item label='Grid Line Weight'>
<Slider
value={newConfig.axes.gridOpacity}
min={0}
max={10}
onChange={(value) => {
handleChange({ axes: { gridOpacity: value } });
}}
marks={{ 0: 0, 10: 10 }}
/>
</Form.Item>
</Form>
);
}
Example #22
| Source File: index.js From aircon with GNU General Public License v3.0 | 4 votes |
|
render() {
const { targetTemp, roomStatus } = this.state;
return (
<div>
<CustomBreadcrumb arr={['用户界面', '信息显示']} />
<Row gutter={16} style={{ marginBottom: 10 }}>
<Col span={6}>
<Card>
<Statistic title="用户名" value={isAuthenticated()} />
</Card>
</Col>
<Col span={6}>
<Card>
<Statistic title="房间号" value={this.state.roomId} />
</Card>
</Col>
<Col span={6}>
<Card>
<Statistic
title="当前温度"
value={roomStatus.curTemp}
precision={2}
valueStyle={{
color: this.state.rising ? red.primary : blue.primary,
}}
prefix={
<Icon type={this.state.rising ? 'arrow-up' : 'arrow-down'} />
}
suffix="℃"
/>
</Card>
</Col>
<Col span={6}>
<Card>
<Statistic
title="当前账单费用"
value={this.state.fee}
precision={2}
prefix={<Icon type="pay-circle" />}
suffix="元"
/>
</Card>
</Col>
</Row>
<Row gutter={16} style={{ marginBottom: 10 }}>
<Col span={6}>
<Card>
<Statistic
title="当前状态"
value={this.getStatusString(roomStatus.status)}
valueStyle={{ color: red.primary }}
prefix={<Icon type="poweroff" />}
/>
</Card>
</Col>
<Col span={6}>
<Card>
<Statistic
title="当前模式"
value={roomStatus.windMode === 'cooling' ? '制冷' : '制热'}
valueStyle={{
color:
roomStatus.windMode === 'cooling'
? blue.primary
: red.primary,
}}
prefix={<Icon type="fire" />}
/>
</Card>
</Col>
<Col span={6}>
<Card>
<Statistic
title="当前风速"
value={this.getSpeedString(roomStatus.windSpeed)}
valueStyle={{
color:
roomStatus.windMode === 'cooling'
? blue.primary
: red.primary,
}}
prefix={<Icon type="loading" />}
/>
</Card>
</Col>
<Col span={6}>
<Card>
<Statistic
title="目标温度"
value={roomStatus.targetTemp}
valueStyle={{ color: red.primary }}
suffix="℃"
/>
</Card>
</Col>
</Row>
<Row gutter={16} style={{ marginBottom: 10 }}>
<Col span={12}>
<Card title="操作面板">
<div>
开关机：
<Switch
checkedChildren="开"
unCheckedChildren="关"
checked={this.state.checked}
onChange={async (checked, event) => {
await request.put(`/api/room/${this.state.roomId}/wind`, {
command: checked ? 'turnOn' : 'turnOff',
});
}}
/>
</div>
<div style={{ marginTop: 16 }}>
模式：
<Radio.Group
value={this.state.windMode}
onChange={this.onWindModeChange}
buttonStyle="solid"
>
<Radio.Button value="cooling">制冷</Radio.Button>
<Radio.Button value="heating">制热</Radio.Button>
</Radio.Group>
</div>
<div style={{ marginTop: 16 }}>
风速：
<Radio.Group
value={this.state.windSpeed}
onChange={this.onWindSpeedChange}
buttonStyle="solid"
>
<Radio.Button value={0}>低风</Radio.Button>
<Radio.Button value={1}>中风</Radio.Button>
<Radio.Button value={2}>高风</Radio.Button>
</Radio.Group>
</div>
<div style={{ marginTop: 16 }}>
目标温度：
<Row>
<Col span={12}>
<Slider
min={roomStatus.windMode === 'cooling' ? 18 : 25}
max={roomStatus.windMode === 'cooling' ? 25 : 30}
onChange={this.onTargetTempChange}
value={targetTemp}
/>
</Col>
<Col span={4}>
<InputNumber
min={roomStatus.windMode === 'cooling' ? 18 : 25}
max={roomStatus.windMode === 'cooling' ? 25 : 30}
style={{ marginLeft: 16 }}
value={targetTemp}
onChange={this.onTargetTempChange}
/>
</Col>
</Row>
</div>
</Card>
</Col>
</Row>
<BackTop visibilityHeight={200} style={{ right: 50 }} />
</div>
);
}
Example #23
| Source File: ChannelSetting.js From network-rc with Apache License 2.0 | 4 votes |
|
export default function ChannelSetting({
saveServerConfig,
serverConfig,
resetChannel,
}) {
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
}, [serverConfig, form]);
const ui = (index, fields, { add, remove }) => {
return (
<Space align="baseline" split={<Divider type="vertical" />} wrap>
{fields.map((field) => {
const uiId = form.getFieldValue([
"channelList",
index,
"ui",
field.name,
"id",
]);
const uiComponent = serverConfig.uiComponentList.find(
(i) => i.id === uiId
);
return (
<Space key={field.key} align="baseline">
<Form.Item
label="UI"
{...field}
name={[field.name, "id"]}
fieldKey={[field.fieldKey, "id"]}
rules={[{ required: true, message: "客官！选一个！" }]}
>
<Select style={{ width: 80 }}>
{serverConfig.uiComponentList.map(({ id, name }) => (
<Option value={id}> {name} </Option>
))}
</Select>
</Form.Item>
{uiComponent && uiComponent.type === "joystick" && (
<Form.Item
label="轴"
{...field}
name={[field.name, "axis"]}
fieldKey={[field.fieldKey, "axis"]}
rules={[{ required: true, message: "客官！选一个！" }]}
>
<Select style={{ width: 80 }}>
<Option value="x">x</Option>
<Option value="y">y</Option>
</Select>
</Form.Item>
)}
<Form.Item
label="控制方向"
{...field}
name={[field.name, "positive"]}
fieldKey={[field.fieldKey, "positive"]}
valuePropName="checked"
>
<Switch checkedChildren="正向" unCheckedChildren="反向" />
</Form.Item>
<Form.Item
label="控制方式"
{...field}
name={[field.name, "method"]}
fieldKey={[field.fieldKey, "method"]}
>
<Select style={{ width: 80 }}>
<Option value="default">默认</Option>
<Option value="step">步进</Option>
</Select>
</Form.Item>
<Form.Item
label="步进速度"
{...field}
name={[field.name, "speed"]}
fieldKey={[field.fieldKey, "speed"]}
initialValue={0.5}
>
<InputNumber
step={0.1}
min={0}
disabled={
"step" !==
form.getFieldValue([
"channelList",
index,
"ui",
field.name,
"method",
])
}
/>
</Form.Item>
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
);
})}
<PlusCircleOutlined
onClick={() =>
add({
positive: true,
method: "default",
})
}
/>
</Space>
);
};
const keyboard = (index, fields, { add, remove }) => {
const type = form.getFieldValue(["channelList", index, "type"]);
return (
<Space align="baseline" direction="vertical">
{fields.map((field) => {
const method = form.getFieldValue([
"channelList",
index,
"keyboard",
field.name,
"method",
]);
return (
<Space key={field.key} align="baseline">
<Form.Item
{...field}
name={[field.name, "name"]}
fieldKey={[field.fieldKey, "name"]}
rules={[{ required: true, message: "客官！选一个按键！" }]}
extra="键盘按键"
>
<Input style={{ width: 80 }} />
</Form.Item>
{type === "pwm" && (
<Form.Item
{...field}
name={[field.name, "method"]}
fieldKey={[field.fieldKey, "method"]}
defaultValue="default"
extra="控制方式"
>
<Radio.Group size="middle">
<Radio.Button value="default">默认</Radio.Button>
<Radio.Button value="step">步进</Radio.Button>
</Radio.Group>
</Form.Item>
)}
{type === "pwm" && (
<Form.Item
{...field}
name={[field.name, "speed"]}
fieldKey={[field.fieldKey, "speed"]}
extra={
method === "default"
? "-1 ~ 1， 0 为归位"
: "每秒步进速度系数"
}
>
<InputNumber max={1} min={-1} step={0.1} />
</Form.Item>
)}
{/* {type === "switch" && (
<Form.Item
{...field}
name={[field.name, "speed"]}
fieldKey={[field.fieldKey, "speed"]}
extra="高低电平"
>
<Radio.Group size="middle">
<Radio.Button value={1}>高</Radio.Button>
<Radio.Button value={-1}>低</Radio.Button>
</Radio.Group>
</Form.Item>
)} */}
{(method === "default" || type === "switch") && (
<Form.Item
{...field}
name={[field.name, "autoReset"]}
fieldKey={[field.fieldKey, "autoReset"]}
extra="释放键盘是否复位"
valuePropName="checked"
defaultValue={true}
>
<Switch />
</Form.Item>
)}
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
);
})}
<PlusCircleOutlined
onClick={() =>
add({
speed: 1,
autoReset: true,
method: "default",
})
}
/>
</Space>
);
};
const gamepad = (index, fields, { add, remove }) => {
const type = form.getFieldValue(["channelList", index, "type"]);
return (
<Space align="baseline" split={<Divider type="vertical" />} wrap>
{fields.map((field) => {
// const method = form.getFieldValue([
// "channelList",
// index,
// "gamepad",
// field.name,
// "method",
// ]);
return (
<Space key={field.key} align="baseline">
<Form.Item
{...field}
name={[field.name, "name"]}
fieldKey={[field.fieldKey, "name"]}
rules={[{ required: true, message: "客官！选一个！" }]}
extra="摇杆轴或按键"
>
<Select style={{ width: 100 }}>
{gamePadInputList.map(({ value, name }) => (
<Option value={value}> {name} </Option>
))}
</Select>
</Form.Item>
{type === "pwm" && (
<Form.Item
{...field}
name={[field.name, "method"]}
fieldKey={[field.fieldKey, "method"]}
defaultValue="default"
extra="控制方式"
>
<Radio.Group size="middle">
<Radio.Button value="default">默认</Radio.Button>
<Radio.Button value="step">步进</Radio.Button>
</Radio.Group>
</Form.Item>
)}
{type === "pwm" && (
<Form.Item
{...field}
name={[field.name, "speed"]}
fieldKey={[field.fieldKey, "speed"]}
extra="控制系数，-1 ~ 1"
>
<InputNumber min={-1} max={1} step={0.1} />
</Form.Item>
)}
{/* {method === "default" && (
<Form.Item
{...field}
name={[field.name, "autoReset"]}
fieldKey={[field.fieldKey, "autoReset"]}
extra="释放按钮是否复位"
valuePropName="checked"
defaultValue={true}
>
<Switch />
</Form.Item>
)} */}
{/* {type === "switch" && (
<Form.Item
{...field}
name={[field.name, "speed"]}
fieldKey={[field.fieldKey, "speed"]}
extra="高低电平"
>
<Radio.Group size="middle">
<Radio.Button value={1}>高</Radio.Button>
<Radio.Button value={-1}>低</Radio.Button>
</Radio.Group>
</Form.Item>
)} */}
<MinusCircleOutlined onClick={() => remove(field.name)} />
</Space>
);
})}
<PlusCircleOutlined
onClick={() =>
add({
speed: 1,
autoReset: true,
method: "default",
})
}
/>
</Space>
);
};
return (
<Form form={form} onFinish={saveServerConfig} initialValues={serverConfig}>
<Form.List name="channelList">
{(fields, { add, remove }) => (
<Space
key={fields.key}
direction="vertical"
style={{ width: "100%" }}
>
{fields.map((field) => (
<Card
key={field.key}
title={
<Space key={field.key} align="baseline" wrap>
<Form.Item
{...field}
name={[field.name, "enabled"]}
fieldKey={[field.fieldKey, "enabled"]}
valuePropName="checked"
>
<Switch checkedChildren="开启" unCheckedChildren="禁用" />
</Form.Item>
<Form.Item
{...field}
label="名称"
name={[field.name, "name"]}
fieldKey={[field.fieldKey, "name"]}
>
<Input style={{ width: 80 }} />
</Form.Item>
<Button danger onClick={() => remove(field.name)}>
<DeleteOutlined />
</Button>
</Space>
}
>
<Row>
<Space key={field.key} align="baseline" wrap>
<Form.Item
{...field}
label="GPIO"
name={[field.name, "pin"]}
fieldKey={[field.fieldKey, "pin"]}
rules={[{ required: true, message: "仔细想想" }]}
>
<Select style={{ width: 60 }}>
{pins.map((pin) => (
<Option key={pin} value={pin}>
{pin}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
{...field}
label="类型"
name={[field.name, "type"]}
fieldKey={[field.fieldKey, "type"]}
rules={[{ required: true, message: "你不能没有我！" }]}
>
<Select style={{ width: 80 }}>
{types.map(({ value, label }) => (
<Option key={value} value={value}>
{label}
</Option>
))}
</Select>
</Form.Item>
{form.getFieldValue([
"channelList",
field.fieldKey,
"type",
]) === "pwm" && (
<>
<Form.Item
{...field}
label="最大值"
name={[field.name, "valuePostive"]}
fieldKey={[field.fieldKey, "valuePostive"]}
>
<InputNumber
step={0.1}
max={2}
min={form.getFieldValue([
"channelList",
field.fieldKey,
"valueReset",
])}
/>
</Form.Item>
<Form.Item
{...field}
label="复位值"
name={[field.name, "valueReset"]}
fieldKey={[field.fieldKey, "valueReset"]}
shouldUpdate
>
<InputNumber
step={0.1}
min={form.getFieldValue([
"channelList",
field.fieldKey,
"valueNegative",
])}
max={form.getFieldValue([
"channelList",
field.fieldKey,
"valuePostive",
])}
/>
</Form.Item>
<Form.Item
{...field}
label="最小值"
name={[field.name, "valueNegative"]}
fieldKey={[field.fieldKey, "valueNegative"]}
>
<InputNumber
step={0.1}
min={-2}
max={form.getFieldValue([
"channelList",
field.fieldKey,
"valueReset",
])}
/>
</Form.Item>
</>
)}
</Space>
</Row>
<Collapse align="start">
<Panel header="UI 控件" size="small">
<Form.List name={[field.name, "ui"]}>
{(...props) => ui(field.fieldKey, ...props)}
</Form.List>
</Panel>
<Panel header="键盘" size="small">
<Form.List name={[field.name, "keyboard"]}>
{(...props) => keyboard(field.fieldKey, ...props)}
</Form.List>
</Panel>
<Panel header="手柄" size="small">
<Form.List name={[field.name, "gamepad"]}>
{(...props) => gamepad(field.fieldKey, ...props)}
</Form.List>
</Panel>
<Panel header="手机重力感应" size="small">
<Form.Item
{...field}
label="方向"
name={[field.name, "orientation", "axis"]}
fieldKey={[field.fieldKey, "orientation", "axis"]}
>
<Select style={{ width: 80 }} allowClear>
{[
{ name: "水平", value: "x" },
{ name: "垂直", value: "y" },
].map((i) => (
<Option key={i.value} value={i.value}>
{i.name}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
{...field}
label="系数"
name={[field.name, "orientation", "coefficient"]}
fieldKey={[field.fieldKey, "orientation", "coefficient"]}
>
<Slider defaultValue={1} max={2} min={-2} step={0.01} />
</Form.Item>
</Panel>
</Collapse>
</Card>
))}
<Form.Item>
<Button
onClick={() =>
add({
id: uuid(),
enabled: true,
valuePostive: 1,
valueNegative: -1,
valueReset: 0,
})
}
block
icon={<PlusOutlined />}
>
添加通道
</Button>
</Form.Item>
</Space>
)}
</Form.List>
<Form.Item>
<Space>
<Button type="primary" htmlType="submit">
保存
</Button>
<Button
type="danger"
onClick={() => {
resetChannel();
store.remove("ui-position");
}}
>
恢复默认通道设置
</Button>
</Space>
</Form.Item>
</Form>
);
}
Example #24
| Source File: ParametersMenu.js From remixr with MIT License | 4 votes |
|
export default function ParametersMenu(props) {
const onChangeHandler = (value, handler, attribute) => {
ReactGA.event({
category: 'Parameters',
action: 'Changed parameters',
label: attribute,
value: value[1] - value[0],
});
handler({
min: value[0],
max: value[1],
});
};
const setCount = (value) => {
ReactGA.event({
category: 'Parameters',
action: 'Changed parameters',
label: 'count',
value: value,
});
props.handlers.setCount(value);
};
return (
<div>
<div style={{}}>
<Text>Number of songs</Text>
<Slider min={10} max={100} defaultValue={props.values.count} onAfterChange={setCount} step={5} />
<Text>Popularity</Text>
<Slider
range={true}
min={0}
max={100}
step={1}
defaultValue={[props.values.popularity.min, props.values.popularity.max]}
onAfterChange={(value) => onChangeHandler(value, props.handlers.setPopularity, 'popularity')}
/>
<Text>Energy</Text>
<Slider
range={true}
min={0}
max={1}
step={0.01}
defaultValue={[props.values.energy.min, props.values.energy.max]}
onAfterChange={(value) => onChangeHandler(value, props.handlers.setEnergy, 'energy')}
/>
<Text>Mood</Text>
<Slider
range={true}
min={0}
max={1}
step={0.01}
defaultValue={[props.values.valence.min, props.values.valence.max]}
onAfterChange={(value) => onChangeHandler(value, props.handlers.setValence, 'valence')}
/>
<Text>Tempo</Text>
<Slider
range={true}
min={50}
max={200}
step={1}
defaultValue={[props.values.tempo.min, props.values.tempo.max]}
onAfterChange={(value) => onChangeHandler(value, props.handlers.setTempo, 'tempo')}
/>
<Text>Danceability</Text>
<Slider
range={true}
min={0}
max={1}
step={0.01}
defaultValue={[props.values.danceability.min, props.values.danceability.max]}
onAfterChange={(value) => onChangeHandler(value, props.handlers.setDanceability, 'danceability')}
/>
<Text>Acousticness</Text>
<Slider
range={true}
min={0}
max={1}
step={0.01}
defaultValue={[props.values.acousticness.min, props.values.acousticness.max]}
onAfterChange={(value) => onChangeHandler(value, props.handlers.setAcousticness, 'acousticness')}
/>
</div>
</div>
);
}
Example #25
| Source File: dark.jsx From virtuoso-design-system with MIT License | 4 votes |
|
render() {
const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Joe', value: 'Joe' },
{ text: 'Jim', value: 'Jim' },
],
filteredValue: null,
onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length,
sortOrder: true,
ellipsis: true,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: false,
sortOrder: true,
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{ text: 'London', value: 'London' },
{ text: 'New York', value: 'New York' },
],
filteredValue: null,
onFilter: (value, record) => record.address.includes(value),
sorter: false,
sortOrder: true,
ellipsis: true,
},
];
return (
<>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.handleDisable}
style={{ marginBottom: 16 }}
/>
<Card title="Card Title">
<Card.Grid>Content</Card.Grid>
<Card.Grid hoverable={false}>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
<Card.Grid>Content</Card.Grid>
</Card>
<Collapse>
<Panel header="This is panel header 1" key="1">
<Collapse defaultActiveKey="1">
<Panel header="This is panel nest panel" key="1">
<p>{text}</p>
</Panel>
</Collapse>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
<Transfer
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={this.handleTransferChange}
onSelectChange={this.handleTransferSelectChange}
render={item => item.title}
disabled={disabled}
/>
<TableTransfer
dataSource={mockData}
targetKeys={targetKeys}
disabled={disabled}
showSearch={showSearch}
onChange={this.handleTableTransferChange}
filterOption={(inputValue, item) =>
item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
}
leftColumns={[
{
dataIndex: 'title',
title: 'Name',
},
{
dataIndex: 'description',
title: 'Description',
},
]}
rightColumns={[
{
dataIndex: 'title',
title: 'Name',
},
]}
/>
<Switch
unCheckedChildren="disabled"
checkedChildren="disabled"
checked={disabled}
onChange={this.triggerDisable}
style={{ marginTop: 16 }}
/>
<Switch
unCheckedChildren="showSearch"
checkedChildren="showSearch"
checked={showSearch}
onChange={this.triggerShowSearch}
style={{ marginTop: 16 }}
/>
<Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link
href="#components-anchor-demo-basic"
title="Basic demo with Target"
target="_blank"
/>
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>
<Tabs type="card">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
<Timeline>
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
Technical testing 2015-09-01
</Timeline.Item>
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>
<Calendar />
<Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>
<TreeNode title="parent 1" key="0-0">
<TreeNode title="parent 1-0" key="0-0-0">
<TreeNode title="leaf" key="0-0-0-0" />
<TreeNode title="leaf" key="0-0-0-1" />
<TreeNode title="leaf" key="0-0-0-2" />
</TreeNode>
<TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title="leaf" key="0-0-1-0" />
</TreeNode>
<TreeNode title="parent 1-2" key="0-0-2">
<TreeNode title="leaf" key="0-0-2-0" />
<TreeNode title="leaf" key="0-0-2-1" />
</TreeNode>
</TreeNode>
</Tree>
<Table columns={columns} dataSource={data} footer={() => 'Footer'} />
<Table
columns={columnsTable}
dataSource={dataTable}
pagination={false}
id="table-demo-summary"
bordered
summary={pageData => {
let totalBorrow = 0;
let totalRepayment = 0;
pageData.forEach(({ borrow, repayment }) => {
totalBorrow += borrow;
totalRepayment += repayment;
});
return (
<>
<tr>
<th>Total</th>
<td>
<Text type="danger">{totalBorrow}</Text>
</td>
<td>
<Text>{totalRepayment}</Text>
</td>
</tr>
<tr>
<th>Balance</th>
<td colSpan={2}>
<Text type="danger">{totalBorrow - totalRepayment}</Text>
</td>
</tr>
</>
);
}}
/>
<br />
<Table columns={columnsNest} expandable={{ expandedRowRender }} dataSource={dataNest} />
<Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
<Card
hoverable
style={{ width: 240 }}
cover={
<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
}
>
<Meta title="Europe Street beat" description="www.instagram.com" />
</Card>
<Slider defaultValue={30} />
<DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</Modal>
</>
);
}
Example #26
| Source File: index.js From pretty-derby with GNU General Public License v3.0 | 4 votes |
|
TestEffectTable = (props) => {
const { t } = useTranslation();
const getMaxLevel = (rarity) => {
switch (rarity) {
case 1:
return 40;
case 2:
return 45;
case 3:
return 50;
default:
return 1;
}
};
const maxLevel = getMaxLevel(props.rarity);
const [selectingLevel, setSelectingLevel] = React.useState(maxLevel);
const calc = (data, input) => {
let nodes = [];
let output = 0;
let prevNode = { level: 0, value: 0 };
for (let i = 0; i < data.length; i += 1) {
if (data[i] !== -1) {
let level = i * 5;
if (level === 0) {
level = 1;
}
nodes.push({ level: level, value: data[i] });
prevNode = { level: level, value: data[i] };
}
if (i === data.length - 1 && data[i] === -1) {
nodes.push({ level: maxLevel, value: prevNode.value });
}
}
nodes.push({ level: 999, value: prevNode.value }); // 以后万一出SSSR？确保一定能找到区间。
const level = Math.floor(input);
let upperNode = { level: 0, value: 0 };
let lowerNode = { level: 0, value: 0 };
if (level < 0 || level > maxLevel) {
output = 0;
} else if (level < nodes[0].level) {
output = 0;
} else {
for (let i = 0; i < nodes.length; i += 1) {
if (level >= nodes[i].level && level < nodes[i + 1].level) {
lowerNode = nodes[i];
upperNode = nodes[i + 1] || nodes[i];
break;
}
}
output = Math.floor(
((upperNode.value - lowerNode.value) / (upperNode.level - lowerNode.level)) *
(level - lowerNode.level) +
lowerNode.value
);
}
return output;
};
const db = useDB();
if (!db) return null;
const effects = db.get("effects").value();
return (
<div>
{props.unique_effect && (
<>
<div className="flex w-full items-center justify-between p-2">
<div>{t("固有效果")}</div>
<div>{`${t("激活等级")}:${props.unique_effect.lv}`}</div>
</div>
<div className="w-full grid grid-cols-2 gap-2">
{["0", "1"].map((index) =>
props.unique_effect[`type_${index}`] ? (
<div
key={index}
className="col-span-1 flex items-center rounded-xl border border-solid bg-green-300 border-green-500"
>
<div
className="flex-auto truncate pl-2"
data-tip={`<div><p>${
effects[props.unique_effect[`type_${index}`]]?.name
}</p><p>${t(effects[props.unique_effect[`type_${index}`]]?.name)}</p><p>${
effects[props.unique_effect[`type_${index}`]]?.description
}</p><p>${t(
effects[props.unique_effect[`type_${index}`]]?.description
)}</p></div>`}
>
{t(effects[props.unique_effect[`type_${index}`]]?.name)}
</div>
<div className="bg-white h-full w-10 md:w-24 rounded-r-xl pl-2 flex items-center flex-shrink-0">
{props.unique_effect[`value_${index}`]}
</div>
</div>
) : null
)}
</div>
</>
)}
<div className="w-full flex items-center">
<div className="mr-2">{t("设置等级")}</div>
<Slider
className="flex-auto"
min={1}
max={maxLevel}
value={selectingLevel}
onChange={(value) => {
setSelectingLevel(value);
}}
marks={getEffectMark(maxLevel)}
/>
</div>
<div className="w-full grid grid-cols-2 gap-2 ">
{props.effects?.map((item, index) => {
const data = [
item.init,
item.limit_lv5,
item.limit_lv10,
item.limit_lv15,
item.limit_lv20,
item.limit_lv25,
item.limit_lv30,
item.limit_lv35,
item.limit_lv40,
item.limit_lv45,
item.limit_lv50,
].filter((item) => item);
return (
<div
key={item.type}
className="col-span-1 flex items-center rounded-xl border border-solid bg-green-300 border-green-500"
>
<div
className="flex-auto truncate pl-2"
data-tip={`<div><p>${effects[item.type].name}</p><p>${t(
effects[item.type].name
)}</p><p>${effects[item.type].description}</p><p>${t(
effects[item.type].description
)}</p></div>`}
>
{t(effects[item.type].name)}
</div>
<div className="bg-white h-full w-10 md:w-24 rounded-r-xl pl-2 flex items-center flex-shrink-0">
{calc(data, selectingLevel)}
</div>
</div>
);
})}
</div>
</div>
);
}
Example #27
| Source File: ExampleUI.jsx From nft-e2e-example with MIT License | 4 votes |
|
export default function ExampleUI({
purpose,
setPurposeEvents,
address,
mainnetProvider,
userProvider,
localProvider,
yourLocalBalance,
price,
tx,
readContracts,
writeContracts,
}) {
const [newPurpose, setNewPurpose] = useState("loading...");
return (
<div>
{/*
⚙️ Here is an example UI that displays and sets the purpose in your smart contract:
*/}
<div style={{ border: "1px solid #cccccc", padding: 16, width: 400, margin: "auto", marginTop: 64 }}>
<h2>Example UI:</h2>
<h4>purpose: {purpose}</h4>
<Divider />
<div style={{ margin: 8 }}>
<Input
onChange={e => {
setNewPurpose(e.target.value);
}}
/>
<Button
onClick={() => {
console.log("newPurpose", newPurpose);
/* look how you call setPurpose on your contract: */
tx(writeContracts.YourContract.setPurpose(newPurpose));
}}
>
Set Purpose
</Button>
</div>
<Divider />
Your Address:
<Address address={address} ensProvider={mainnetProvider} fontSize={16} />
<Divider />
ENS Address Example:
<Address
address="0x34aA3F359A9D614239015126635CE7732c18fDF3" /* this will show as austingriffith.eth */
ensProvider={mainnetProvider}
fontSize={16}
/>
<Divider />
{/* use formatEther to display a BigNumber: */}
<h2>Your Balance: {yourLocalBalance ? formatEther(yourLocalBalance) : "..."}</h2>
<div>OR</div>
<Balance address={address} provider={localProvider} price={price} />
<Divider />
<div>? Example Whale Balance:</div>
<Balance balance={parseEther("1000")} provider={localProvider} price={price} />
<Divider />
{/* use formatEther to display a BigNumber: */}
<h2>Your Balance: {yourLocalBalance ? formatEther(yourLocalBalance) : "..."}</h2>
<Divider />
Your Contract Address:
<Address
address={readContracts ? readContracts.YourContract.address : readContracts}
ensProvider={mainnetProvider}
fontSize={16}
/>
<Divider />
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/* look how you call setPurpose on your contract: */
tx(writeContracts.YourContract.setPurpose("? Cheers"));
}}
>
Set Purpose to "? Cheers"
</Button>
</div>
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/*
you can also just craft a transaction and send it to the tx() transactor
here we are sending value straight to the contract's address:
*/
tx({
to: writeContracts.YourContract.address,
value: parseEther("0.001"),
});
/* this should throw an error about "no fallback nor receive function" until you add it */
}}
>
Send Value
</Button>
</div>
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/* look how we call setPurpose AND send some value along */
tx(
writeContracts.YourContract.setPurpose("? Paying for this one!", {
value: parseEther("0.001"),
}),
);
/* this will fail until you make the setPurpose function payable */
}}
>
Set Purpose With Value
</Button>
</div>
<div style={{ margin: 8 }}>
<Button
onClick={() => {
/* you can also just craft a transaction and send it to the tx() transactor */
tx({
to: writeContracts.YourContract.address,
value: parseEther("0.001"),
data: writeContracts.YourContract.interface.encodeFunctionData("setPurpose(string)", [
"? Whoa so 1337!",
]),
});
/* this should throw an error about "no fallback nor receive function" until you add it */
}}
>
Another Example
</Button>
</div>
</div>
{/*
? Maybe display a list of events?
(uncomment the event and emit line in YourContract.sol! )
*/}
<div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 32 }}>
<h2>Events:</h2>
<List
bordered
dataSource={setPurposeEvents}
renderItem={item => {
return (
<List.Item key={item.blockNumber + "_" + item.sender + "_" + item.purpose}>
<Address address={item[0]} ensProvider={mainnetProvider} fontSize={16} /> =>
{item[1]}
</List.Item>
);
}}
/>
</div>
<div style={{ width: 600, margin: "auto", marginTop: 32, paddingBottom: 256 }}>
<Card>
Check out all the{" "}
<a
href="https://github.com/austintgriffith/scaffold-eth/tree/master/packages/react-app/src/components"
target="_blank"
rel="noopener noreferrer"
>
? components
</a>
</Card>
<Card style={{ marginTop: 32 }}>
<div>
There are tons of generic components included from{" "}
<a href="https://ant.design/components/overview/" target="_blank" rel="noopener noreferrer">
? ant.design
</a>{" "}
too!
</div>
<div style={{ marginTop: 8 }}>
<Button type="primary">Buttons</Button>
</div>
<div style={{ marginTop: 8 }}>
<SyncOutlined spin /> Icons
</div>
<div style={{ marginTop: 8 }}>
Date Pickers?
<div style={{ marginTop: 2 }}>
<DatePicker onChange={() => {}} />
</div>
</div>
<div style={{ marginTop: 32 }}>
<Slider range defaultValue={[20, 50]} onChange={() => {}} />
</div>
<div style={{ marginTop: 32 }}>
<Switch defaultChecked onChange={() => {}} />
</div>
<div style={{ marginTop: 32 }}>
<Progress percent={50} status="active" />
</div>
<div style={{ marginTop: 32 }}>
<Spin />
</div>
</Card>
</div>
</div>
);
}
