antd#Slider TypeScript 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: SliderController.tsx From datart with Apache License 2.0 | 6 votes |
|
SlideController: React.FC<SelectControllerProps> = memo(
({ onChange, value, minValue, maxValue, step, showMarks }) => {
const [val, setVal] = useState<any>();
const _onChange = _val => {
setVal(_val);
};
const _onChangeEnter = value => {
onChange(value);
};
useEffect(() => {
setVal(value);
}, [value]);
const marks = {
[minValue]: minValue,
[maxValue]: maxValue,
[val]: val,
};
return (
<StyledWrap>
<Slider
value={val}
onChange={_onChange}
onAfterChange={_onChangeEnter}
min={minValue}
max={maxValue}
step={step}
{...(showMarks && { marks: marks })}
/>
</StyledWrap>
);
},
)
Example #2
| Source File: UrgentSlider.tsx From mayoor with MIT License | 6 votes |
|
UrgentSlider: React.FC = () => {
const { t } = useTranslation();
const [{ value }, { touched, error }, { setValue }] = useField('urgency');
const errorMessage = touched && error;
const status = errorMessage ? 'error' : '';
const urgentOptions = getUrgentOptions(t);
const marks = urgentOptions.reduce<{ [key: number]: ReactNode | undefined }>((acc, curr, i) => {
acc[i] = value === i ? <label>{curr.label}</label> : undefined;
return acc;
}, {});
const activeUrgentOption = urgentOptions.find((option) => option.value === value);
return (
<StyledFormItem validateStatus={status} help={errorMessage}>
<StyledLabel>{t('Urgency')}</StyledLabel>
<StyledSliderWrapper color={activeUrgentOption?.color}>
<Slider
min={0}
max={4}
marks={marks}
value={value}
onChange={setValue}
tooltipVisible={false}
></Slider>
</StyledSliderWrapper>
</StyledFormItem>
);
}
Example #3
| Source File: BasicSlider.tsx From datart with Apache License 2.0 | 6 votes |
|
BasicSlider: FC<ItemLayoutProps<ChartStyleConfig>> = memo(
({ ancestors, translate: t = title => title, data: row, onChange }) => {
const { comType, options, ...rest } = row;
return (
<BW label={t(row.label, true)}>
<Slider
{...rest}
{...options}
min={!isUndefined(options?.min) ? Number(options?.min) : 1}
max={!isUndefined(options?.max) ? Number(options?.max) : 10}
step={!isUndefined(options?.step) ? Number(options?.step) : 1}
dots={isUndefined(options?.dots) ? true : options?.dots}
defaultValue={rest?.default}
onChange={value => onChange?.(ancestors, value)}
/>
</BW>
);
},
itemLayoutComparer,
)
Example #4
| Source File: SizeAction.tsx From datart with Apache License 2.0 | 6 votes |
|
SizeAction: FC<{
config: ChartDataSectionField;
onConfigChange: (
config: ChartDataSectionField,
needRefresh?: boolean,
) => void;
}> = ({ config, onConfigChange }) => {
const actionNeedNewRequest = true;
const [size, setSize] = useState(config?.size);
const handleChange = selectedValue => {
const newConfig = updateBy(config, draft => {
draft.size = selectedValue;
});
setSize(selectedValue);
onConfigChange?.(newConfig, actionNeedNewRequest);
};
return (
<Slider
dots
tooltipVisible
value={size}
onChange={handleChange}
min={1}
max={10}
step={1}
/>
);
}
Example #5
| Source File: SliderSet.tsx From datart with Apache License 2.0 | 6 votes |
|
SliderSet: React.FC<SliderSetProps> = memo(
({ onChange, value, maxValue, minValue, step, showMarks }) => {
const [val, setVal] = useState<any>();
const _onChange = _val => {
onChange?.([_val]);
};
const marks = {
[minValue]: minValue,
[maxValue]: maxValue,
[val]: val,
};
useEffect(() => {
setVal(value?.[0]);
}, [value]);
return (
<Slider
max={maxValue}
min={minValue}
step={step}
value={val}
{...(showMarks && { marks: marks })}
onChange={_onChange}
/>
);
},
)
Example #6
| Source File: GeneralSlider.tsx From next-basics with GNU General Public License v3.0 | 6 votes |
|
export function GeneralSlider(props: GeneralSliderProps): React.ReactElement {
const {
value,
disabled,
dots,
max,
min,
range,
marks,
step,
included,
onlyShowMode,
size,
onChange,
onAfterChange,
} = props;
return (
<Slider
className={classNames({
[style.onlyShowMode]: onlyShowMode,
[style.bigMode]: size === "large",
})}
value={value}
disabled={disabled || onlyShowMode}
dots={dots}
max={max}
min={min}
range={range}
marks={marks}
step={step}
included={included}
onChange={onChange}
onAfterChange={onAfterChange}
/>
);
}
Example #7
| Source File: GeneralSlider.spec.tsx From next-basics with GNU General Public License v3.0 | 6 votes |
|
describe("GeneralSlider", () => {
it("should work", () => {
const changeMock = jest.fn();
const props = {
value: 30,
onChange: changeMock,
};
const wrapper = shallow(<GeneralSlider {...props} />);
wrapper.find(Slider).invoke("onChange")(3);
expect(changeMock).toHaveBeenCalledWith(3);
});
});
Example #8
| Source File: GeneralSlide.spec.tsx From next-basics with GNU General Public License v3.0 | 6 votes |
|
describe("GeneralSlide", () => {
it("should work", () => {
const changeMock = jest.fn();
const props = {
value: 30,
onChange: changeMock,
};
const wrapper = shallow(<GeneralSlide {...props} />);
wrapper.find(Slider).invoke("onChange")(3);
expect(changeMock).toHaveBeenCalledWith(3);
wrapper.setProps({ uiType: "dashboard" });
expect(wrapper.find(".dashboardSlider").length).toBe(1);
});
});
Example #9
| Source File: SliderSet.tsx From datart with Apache License 2.0 | 6 votes |
|
RangeSliderSet: React.FC<SliderSetProps> = memo(
({ onChange, value }) => {
const [val, setVal] = useState<any>();
const _onChange = _val => {
onChange?.(_val);
};
useEffect(() => {
setVal([value?.[0], value?.[1]]);
}, [value]);
return <Slider range value={val} onChange={_onChange} />;
},
)
Example #10
| Source File: utils.tsx From antdp with MIT License | 6 votes |
|
getItem = ({ attr, type, inputNode }: {
attr?: Partial<ItemChildAttr<any, any>>;
type?: ItemChildType;
inputNode?: ((...arg: any[]) => React.ReactNode) | React.ReactNode;
}) => {
let renderItem = undefined;
if (type === 'Input') {
const inputAttr = attr as InputProps;
renderItem = <Input {...inputAttr} />;
} else if (type === 'TextArea') {
const inputAttr = attr as TextAreaProps;
renderItem = <Input.TextArea {...inputAttr} />;
} else if (type === 'InputNumber') {
const inputAttr = attr as InputNumberProps;
renderItem = <InputNumber {...inputAttr} />;
} else if (type === 'AutoComplete') {
const inputAttr = attr as AutoCompleteProps;
renderItem = <AutoComplete {...inputAttr} />;
} else if (type === 'Cascader') {
const inputAttr = attr as CascaderProps;
renderItem = <Cascader {...inputAttr} />;
} else if (type === 'DatePicker') {
const inputAttr = attr as DatePickerProps;
renderItem = <DatePicker {...inputAttr} />;
} else if (type === 'Rate') {
const inputAttr = attr as RateProps;
renderItem = <Rate {...inputAttr} />;
} else if (type === 'Slider') {
const inputAttr = attr as SliderSingleProps;
renderItem = <Slider {...inputAttr} />;
} else if (type === 'TreeSelect') {
const inputAttr = attr as TreeSelectProps<any>;
renderItem = <TreeSelect {...inputAttr} />;
} else if (type === 'Select') {
const inputAttr = attr as SelectProps<any>;
renderItem = <Select {...inputAttr} />;
} else if (type === 'Checkbox') {
const inputAttr = attr as CheckboxGroupProps;
renderItem = <Checkbox.Group {...inputAttr} />;
} else if (type === 'Mentions') {
const inputAttr = attr as MentionProps;
renderItem = <Mentions {...inputAttr} />;
} else if (type === 'Radio') {
const inputAttr = attr as RadioProps;
renderItem = <Radio.Group {...inputAttr} />;
} else if (type === 'Switch') {
const inputAttr = attr as SwitchProps;
renderItem = <Switch {...inputAttr} />;
} else if (type === 'TimePicker') {
const inputAttr = attr as TimePickerProps;
renderItem = <TimePicker {...inputAttr} />;
} else if (type === 'Upload') {
const inputAttr = attr as UploadProps;
renderItem = <Upload {...inputAttr} />;
} else if (type === 'RangePicker') {
const inputAttr = attr as RangePickerProps;
renderItem = <RangePicker {...inputAttr} />;
} else if (type === 'Custom') {
renderItem = inputNode;
}
return renderItem;
}
Example #11
| Source File: SliderFilter.tsx From datart with Apache License 2.0 | 6 votes |
|
SliderFilter: FC<PresentControllerFilterProps> = memo(
({ condition, options, onConditionChange }) => {
const [valueRange, setValueRange] = useState(() => {
if (Array.isArray(condition?.value)) {
return condition?.value as [number, number];
}
});
const handleValueChange = (values: [number, number]) => {
const newCondition = updateBy(condition!, draft => {
draft.value = values;
});
onConditionChange(newCondition);
setValueRange(newCondition.value as [number, number]);
};
return (
<Slider
range
value={valueRange}
onChange={handleValueChange}
min={options?.min}
max={options?.max}
/>
);
},
)
Example #12
| Source File: SliderField.tsx From jmix-frontend with Apache License 2.0 | 6 votes |
|
export function SliderField({
entityName,
propertyName,
formItemProps,
value,
onChange,
...rest
}: SliderFieldProps) {
return (
<JmixFormFieldWrapper
entityName={entityName}
propertyName={propertyName}
formItemProps={formItemProps}
renderField={isReadOnly => (
<Slider
value={value}
onChange={onChange}
disabled={isReadOnly}
{...rest}
/>
)}
/>
);
}
Example #13
| Source File: index.tsx From ant-simple-draw with MIT License | 5 votes |
|
BoxShadow: FC<FormProps<valueType>> = memo(({ value, onChange }) => {
const [val, setVal] = useSetState<valueType>({
h: 0,
v: 0,
bs: 0,
ss: 0,
c: undefined,
});
const marks = {
'-100': '-100',
0: '0',
100: '100',
};
const triggerChange = (changedValue: Partial<valueType>) => {
onChange && onChange({ ...value, ...val, ...changedValue });
};
useEffect(() => {
if (value) {
setVal(value);
}
}, [value]);
return (
<>
<Input
type={'color'}
title="阴影的颜色"
value={val.c}
onChange={(val) => triggerChange({ c: val.target.value })}
></Input>
<Slider
marks={marks}
range={false}
defaultValue={0}
min={-100}
max={100}
value={val.h}
onChange={(val) => triggerChange({ h: val })}
tipFormatter={(val) => <span>水平阴影的位置 {val}%</span>}
/>
<Slider
marks={marks}
range={false}
defaultValue={0}
min={-100}
max={100}
value={val.v}
onChange={(val) => triggerChange({ v: val })}
tipFormatter={(val) => <span>垂直阴影的位置 {val}%</span>}
/>
<Slider
tipFormatter={(val) => <span>模糊的距离 {val}%</span>}
value={val.bs}
onChange={(val) => triggerChange({ bs: val })}
marks={{
0: '0',
100: '100',
}}
/>
<Slider
tipFormatter={(val) => <span>阴影的大小 {val}%</span>}
value={val.ss}
onChange={(val) => triggerChange({ ss: val })}
marks={{
0: '0',
100: '100',
}}
/>
</>
);
})
Example #14
| Source File: GraphStyles.tsx From fe-v5 with Apache License 2.0 | 5 votes |
|
export default function GraphStyles() {
const namePrefix = ['custom'];
return (
<Panel header='图表样式'>
<>
<Form.Item label='绘制模式' name={[...namePrefix, 'drawStyle']}>
<Radio.Group buttonStyle='solid'>
<Radio.Button value='lines'>lines</Radio.Button>
<Radio.Button value='bars'>bars</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item noStyle shouldUpdate={(prevValues, curValues) => _.get(prevValues, [...namePrefix, 'drawStyle']) !== _.get(curValues, [...namePrefix, 'drawStyle'])}>
{({ getFieldValue }) => {
const drawStyle = getFieldValue([...namePrefix, 'drawStyle']);
if (drawStyle === 'lines' || drawStyle === 'bars') {
return (
<>
{drawStyle === 'lines' ? (
<Form.Item label='线插值' name={[...namePrefix, 'lineInterpolation']}>
<Radio.Group buttonStyle='solid'>
<Radio.Button value='linear'>linear</Radio.Button>
<Radio.Button value='smooth'>smooth</Radio.Button>
</Radio.Group>
</Form.Item>
) : null}
<Form.Item label='透明度' name={[...namePrefix, 'fillOpacity']}>
<Slider min={0} max={1} step={0.01} />
</Form.Item>
</>
);
}
return null;
}}
</Form.Item>
<Form.Item label='堆叠' name={[...namePrefix, 'stack']}>
<Radio.Group buttonStyle='solid'>
<Radio.Button value='noraml'>开启</Radio.Button>
<Radio.Button value='off'>关闭</Radio.Button>
</Radio.Group>
</Form.Item>
</>
</Panel>
);
}
Example #15
| Source File: PaintControls.tsx From disco-cube-admin with MIT License | 5 votes |
|
PaintControls: React.FC<Props> = ({ settings, onSettingsChange }) => {
const [pickerVisible, setPickerVisible] = React.useState(false);
const sizeRatio = settings.bushSize / 10;
return (
<Horizontal verticalAlign="center" spacing={20}>
<Slider
style={{ width: "100%" }}
value={settings.bushSize}
min={1}
max={10}
onChange={(v: any) => onSettingsChange({ ...settings, bushSize: Array.isArray(v) ? 0 : v })}
/>
<Vertical
style={{
width: 40,
height: 40,
position: "relative",
}}
horizontalAlign="center"
verticalAlign="center"
onClick={() => setPickerVisible(true)}
>
<div
style={{
width: 40 * sizeRatio,
height: 40 * sizeRatio,
borderRadius: "0.5em",
backgroundColor: `rgb(${settings.brushColor.r}, ${settings.brushColor.g}, ${settings.brushColor.b})`,
}}
></div>
{pickerVisible && (
<Vertical
style={{
position: "absolute",
top: -0,
right: -0,
zIndex: 10000,
padding: 20,
background: "white",
borderRadius: 6,
}}
>
<div
style={{
position: "fixed",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px",
}}
onClick={e => {
setPickerVisible(false);
e.stopPropagation();
e.preventDefault();
return false;
}}
></div>
<HuePicker
color={settings.brushColor}
onChange={color => onSettingsChange({ ...settings, brushColor: color.rgb })}
/>
</Vertical>
)}
</Vertical>
</Horizontal>
);
}
Example #16
| Source File: index.tsx From metaplex with Apache License 2.0 | 5 votes |
|
RoyaltiesSplitter = (props: {
creators: Array<UserValue>;
royalties: Array<Royalty>;
setRoyalties: Function;
isShowErrors?: boolean;
}) => {
return (
<Col>
<Row gutter={[0, 24]}>
{props.creators.map((creator, idx) => {
const royalty = props.royalties.find(
royalty => royalty.creatorKey === creator.key,
);
if (!royalty) return null;
const amt = royalty.amount;
const handleChangeShare = (newAmt: number) => {
props.setRoyalties(
props.royalties.map(_royalty => {
return {
..._royalty,
amount:
_royalty.creatorKey === royalty.creatorKey
? newAmt
: _royalty.amount,
};
}),
);
};
return (
<Col span={24} key={idx}>
<Row
align="middle"
gutter={[0, 16]}
style={{ margin: '5px auto' }}
>
<Col span={4} style={{ padding: 10 }}>
{creator.label}
</Col>
<Col span={3}>
<InputNumber<number>
min={0}
max={100}
formatter={value => `${value}%`}
value={amt}
parser={value => parseInt(value?.replace('%', '') ?? '0')}
onChange={handleChangeShare}
className="royalties-input"
/>
</Col>
<Col span={4} style={{ paddingLeft: 12 }}>
<Slider value={amt} onChange={handleChangeShare} />
</Col>
{props.isShowErrors && amt === 0 && (
<Col style={{ paddingLeft: 12 }}>
<Text type="danger">
The split percentage for this creator cannot be 0%.
</Text>
</Col>
)}
</Row>
</Col>
);
})}
</Row>
</Col>
);
}
Example #17
| Source File: index.tsx From ant-simple-draw with MIT License | 5 votes |
|
TextShadow: FC<FormProps<valueType>> = memo(({ value, onChange }) => {
const [val, setVal] = useSetState<valueType>({
h: 0,
v: 0,
s: 0,
c: undefined,
});
const marks = {
'-100': '-100',
0: '0',
100: '100',
};
const triggerChange = (changedValue: Partial<valueType>) => {
onChange && onChange({ ...value, ...val, ...changedValue });
};
useEffect(() => {
if (value) {
setVal(value);
}
}, [value]);
return (
<>
<Input
type={'color'}
title="阴影的颜色"
value={val.c}
onChange={(val) => triggerChange({ c: val.target.value })}
></Input>
<Slider
marks={marks}
range={false}
defaultValue={0}
min={-100}
max={100}
value={val.h}
onChange={(val) => triggerChange({ h: val })}
tipFormatter={(val) => <span>水平阴影的位置 {val}%</span>}
/>
<Slider
marks={marks}
range={false}
defaultValue={0}
min={-100}
max={100}
value={val.v}
onChange={(val) => triggerChange({ v: val })}
tipFormatter={(val) => <span>垂直阴影的位置 {val}%</span>}
/>
<Slider
tipFormatter={(val) => <span>模糊的距离 {val}%</span>}
value={val.s}
onChange={(val) => triggerChange({ s: val })}
marks={{
0: '0',
100: '100',
}}
/>
</>
);
})
Example #18
| Source File: GeneralSlide.tsx From next-basics with GNU General Public License v3.0 | 5 votes |
|
export function GeneralSlide(props: GeneralSlideProps): React.ReactElement {
const {
value,
disabled,
dots,
max,
min,
range,
marks,
step,
included,
onlyShowMode,
size,
uiType,
tooltipVisible,
tipFormatter,
} = props;
return (
<div className={uiType === "dashboard" ? style.dashboardSlider : ""}>
<FormItemWrapper {...omit(props, ["min", "max"])}>
<Slider
className={classNames({
[style.onlyShowMode]: onlyShowMode,
[style.bigMode]: size === "large",
})}
value={props.name && props.formElement ? undefined : value}
disabled={disabled || onlyShowMode}
dots={dots}
max={max}
min={min}
range={range}
marks={marks}
step={step}
included={included}
onChange={props.onChange}
onAfterChange={props.onAfterChange}
tipFormatter={tipFormatter}
tooltipVisible={tooltipVisible}
/>
</FormItemWrapper>
</div>
);
}
Example #19
| Source File: index.tsx From ant-simple-draw with MIT License | 5 votes |
|
BorderRadius: FC<FormProps<valueType>> = memo(function BorderRadius({ value, onChange }) {
const [positipon, setPosition] = useSetState({
lt: 0,
lb: 0,
rt: 0,
rb: 0,
});
const triggerChange = (changedValue: Partial<valueType>) => {
onChange && onChange({ ...value, ...positipon, ...changedValue });
};
useEffect(() => {
if (value) {
setPosition(value);
}
}, [value]);
return (
<>
<Slider
tipFormatter={(val) => <span>左上角 {val}%</span>}
value={positipon.lt}
onChange={(val) => triggerChange({ lt: val })}
/>
<Slider
tipFormatter={(val) => <span>左下角 {val}%</span>}
value={positipon.lb}
onChange={(val) => triggerChange({ lb: val })}
/>
<Slider
tipFormatter={(val) => <span>右上角 {val}%</span>}
value={positipon.rt}
onChange={(val) => triggerChange({ rt: val })}
/>
<Slider
tipFormatter={(val) => <span>右下角 {val}%</span>}
value={positipon.rb}
onChange={(val) => triggerChange({ rb: val })}
/>
</>
);
})
Example #20
| Source File: ZoomControl.tsx From datart with Apache License 2.0 | 5 votes |
|
ZoomControl: React.FC<ZoomControlProps> = props => {
const { sliderValue, scale, zoomIn, zoomOut, sliderChange } = props;
const percentage = useMemo(() => {
if (!scale) {
return '';
}
if (scale[0] === scale[1]) {
return `${Math.floor(scale[0] * 100)}%`;
}
return scale.map((s: number) => `${Math.floor(s * 100)}%`).join('/');
}, [scale]);
return (
<Wrapper>
<div className="bottom-box">
<Space>
<Tooltip title="缩小视图">
<Button
size="small"
type="text"
onClick={zoomIn}
icon={<MinusSquareOutlined />}
></Button>
</Tooltip>
<Slider
className="bottom-slider"
onChange={sliderChange}
value={sliderValue}
/>
<Tooltip title="放大视图">
<Button
size="small"
type="text"
onClick={zoomOut}
icon={<PlusSquareOutlined />}
></Button>
</Tooltip>
<label className="value-label">{percentage}</label>
</Space>
</div>
</Wrapper>
);
}
Example #21
| Source File: FormRender.tsx From ant-simple-draw with MIT License | 4 votes |
|
FormRender: FC<FormRenderType> = memo(
function FormRender({ editType, onSave, showEditPropsData, id }) {
const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue(showEditPropsData);
return () => {
form.resetFields();
};
}, [form, id]);
const onFinish = (values: Store) => {
onSave && onSave(values);
};
const handlechange = () => {
onFinish(form.getFieldsValue());
};
const colFun = (col: number | undefined) => (col ? col : 24);
return (
<Form form={form} name={`form_editor`} onFinish={onFinish} onValuesChange={handlechange}>
<Row gutter={[30, 0]}>
{editType.map((item, index) => {
return (
<React.Fragment key={item.key}>
{item.type === 'Number' && (
<Col span={colFun(item.col)}>
<AttrContainer border={item.border || false} title={item.title}>
<Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
<InputNumber style={{ width: item.width }} min={0} />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Background' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
<BackGround />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Switch' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item
style={{ margin: '0' }}
label={item.name}
name={item.key}
valuePropName="checked"
labelAlign="left"
labelCol={{ span: 19 }}
>
<Switch />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Image' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item label={null} name={item.key} style={{ margin: '0' }}>
<ImgComponent />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Input' && (
<Col span={colFun(item.col)}>
<AttrContainer border={true} title={item.title}>
<Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
<Input />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'RichText' && (
<Col span={colFun(item.col)}>
<AttrContainer
border={false}
title={item.title}
containerStyle={{ padding: '0' }}
>
<Form.Item label={null} name={item.key} style={{ margin: '0' }}>
<WangEditor />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Radio' && (
<Col span={colFun(item.col)}>
<AttrContainer border={true} title={item.title}>
<Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
<Radio.Group>
{item.options!.map((items, index) => (
<Radio value={items.value} key={index}>
{items.label}
</Radio>
))}
</Radio.Group>
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Select' && (
<Col span={colFun(item.col)}>
<AttrContainer border={true} title={item.title}>
<Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
<Selects data={item.options!} valKey={'value'} valName={'label'} />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'TextArea' && (
<Col span={colFun(item.col)}>
<AttrContainer
border={false}
title={item.title}
containerStyle={{ padding: '0' }}
>
<Form.Item label={null} name={item.key} style={{ margin: '0' }}>
<TextArea autoSize={{ minRows: 2 }} showCount />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Color' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
<Input type={'color'} />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Border' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item label={item.name} name={item.key} style={{ margin: '0' }}>
<Border />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Slider' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item
label={item.name}
name={item.key}
style={{ margin: '0' }}
initialValue={100}
>
<Slider tipFormatter={(val) => val + '%'} />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'FontStyle' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item label={null} name={item.key} style={{ margin: '0' }}>
<FontStyle />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'Padding' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item
label={item.name}
name={item.key}
style={{ margin: '0', display: 'flex', alignItems: 'center' }}
>
<Padding />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'BorderRadius' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item
label={
<div>
<span> {item.name}</span>
<Tooltip title="只有在背景，边框等样式下有效果">
<ExclamationCircleOutlined
style={{ color: '#9da3ac', paddingLeft: '3px', fontSize: '17px' }}
/>
</Tooltip>
</div>
}
name={item.key}
style={{ margin: '0', display: 'flex', alignItems: 'center' }}
>
<BorderRadius />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'TextShadow' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item
label={item.name}
name={item.key}
style={{ margin: '0', display: 'flex', alignItems: 'center' }}
>
<TextShadow />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'BoxShadow' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item
label={
<div>
<span> {item.name}</span>
<Tooltip title="只有在背景下有效果">
<ExclamationCircleOutlined
style={{ color: '#9da3ac', paddingLeft: '3px', fontSize: '17px' }}
/>
</Tooltip>
</div>
}
name={item.key}
style={{ margin: '0', display: 'flex', alignItems: 'center' }}
>
<BoxShadow />
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'OlUl' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item style={{ margin: '0' }}>
<OlUl
keyName={item.key}
form={form}
showEditPropsData={showEditPropsData}
/>
</Form.Item>
</AttrContainer>
</Col>
)}
{item.type === 'TaskList' && (
<Col span={colFun(item.col)}>
<AttrContainer title={item.title}>
<Form.Item style={{ margin: '0' }}>
<TaskList keyName={item.key} />
</Form.Item>
</AttrContainer>
</Col>
)}
</React.Fragment>
);
})}
</Row>
</Form>
);
},
(prevProps, nextProps) => {
if (prevProps.id !== nextProps.id) {
// 防止多次出发组件
return false;
} else {
return true;
}
},
)
Example #22
| Source File: DormantFunds.tsx From nanolooker with MIT License | 4 votes |
|
DormantFunds: React.FC<Props> = ({ data }) => {
const { t } = useTranslation();
const [marks, setMarks] = React.useState({});
const [totalFunds, setTotalFunds] = React.useState<number>(0);
const [unknownDormantFunds, setUnknownDormantFunds] = React.useState<number>(
0,
);
const {
frontierCount: { count: frontierCount },
} = useFrontierCount();
const { availableSupply } = useAvailableSupply();
const isMediumAndLower = !useMediaQuery("(min-width: 768px)");
React.useEffect(() => {
if (!data || !availableSupply) return;
let totalFunds: number = 0;
dormantFundsByRange = {};
Object.entries(data).forEach(([year, months]: [string, any]) => {
months.forEach((total: number, i: number) => {
if (!total) return;
const key = `Q${Math.ceil(i / 4 + 1)} ${year}`;
totalFunds = new BigNumber(totalFunds).plus(total).toNumber();
dormantFundsByRange[key] = {
total: new BigNumber(dormantFundsByRange[key]?.total || 0)
.plus(total)
.toNumber(),
};
});
});
let totalDormant: number = 0;
const dormantFundsByRangeKeys = Object.keys(dormantFundsByRange);
const marks = dormantFundsByRangeKeys.reduce(
(acc: any = {}, key: string, i: number) => {
const percent = Math.ceil(
(100 / (dormantFundsByRangeKeys.length - 1)) * i,
);
dormantFundsByRange[key].percent = percent;
totalDormant =
i === 0
? 0
: new BigNumber(totalDormant)
.plus(dormantFundsByRange[key].total)
.toNumber();
dormantFundsByRange[key].totalDormant = totalDormant;
acc[percent] = key;
return acc;
},
{},
);
setMarks(marks);
setTotalFunds(totalFunds);
setUnknownDormantFunds(
new BigNumber(availableSupply).minus(totalFunds).toNumber(),
);
}, [data, availableSupply]);
return (
<>
<Title level={3}>{t("pages.distribution.dormantFunds")}</Title>
<Card size="small">
<div style={{ marginBottom: "12px" }}>
<Text style={{ fontSize: "12px" }}>
{t("pages.distribution.dormantFundsExperiment", {
totalAccounts: new BigNumber(frontierCount).toFormat(),
})}
</Text>
<br />
<Text style={{ fontSize: "12px" }}>
<ul style={{ margin: "12px 0" }}>
<li>
{t("pages.distribution.availableSupply")}:{" "}
<strong>Ӿ {new BigNumber(availableSupply).toFormat()}</strong>
</li>
<li>
{t("pages.distribution.knownAccountBalances")}:{" "}
<strong>Ӿ {new BigNumber(totalFunds).toFormat()}</strong>
</li>
<li>
{t("pages.distribution.unknownDormantFunds")}:{" "}
<strong>
Ӿ {new BigNumber(unknownDormantFunds).toFormat()}
</strong>
</li>
</ul>
</Text>
<Text style={{ fontSize: "12px" }}>
{t("pages.distribution.dormantFundsQuarterExample")}
</Text>
</div>
<div
style={{
margin: `${
isMediumAndLower ? "48px 20px 48px auto" : "72px auto 0"
}`,
width: isMediumAndLower ? "20%" : "90%",
height: isMediumAndLower ? "300px" : "auto",
}}
>
<Slider
marks={marks}
step={null}
vertical={isMediumAndLower}
reverse={isMediumAndLower}
tooltipVisible
defaultValue={0}
tooltipPlacement={isMediumAndLower ? "left" : "top"}
tipFormatter={key => {
const totalDormant = new BigNumber(
find(dormantFundsByRange, ["percent", key])?.totalDormant || 0,
)
.plus(unknownDormantFunds)
.toNumber();
const percentAvailableSupply = new BigNumber(totalDormant)
.times(100)
.dividedBy(availableSupply)
.toFormat(2);
return (
<div style={{ fontSize: "12px" }}>
<div>
<strong>{new BigNumber(totalDormant).toFormat(5)}</strong>{" "}
{t("pages.distribution.dormantNano")}
</div>
<div>
<strong>{percentAvailableSupply}%</strong>{" "}
{t("pages.distribution.ofAvailableSupply")}
</div>
</div>
);
}}
/>
</div>
</Card>
</>
);
}
Example #23
| Source File: Range.tsx From nanolooker with MIT License | 4 votes |
|
FilterTransactionsRangePreferences: React.FC<Props> = ({
isDetailed,
}) => {
const { t } = useTranslation();
const {
filterTransactions,
setFilterTransactions,
filterTransactionsRange,
setFilterTransactionsRange,
} = React.useContext(PreferencesContext);
const isMediumAndLower = !useMediaQuery("(min-width: 768px)");
const marks = React.useCallback(() => {
return units.reduce((acc, { unit, raw }, index) => {
if (raw === 1e30) {
acc[index] = {
label: (
<>
<strong>{unit}</strong>
<Tooltip
placement="top"
title={<Trans i18nKey="tooltips.mnano" />}
>
<QuestionCircle />
</Tooltip>
</>
),
};
} else if (raw === Infinity) {
acc[index] = {
label: <Trans i18nKey="pages.preferences.noLimit" />,
};
} else {
if (!isMediumAndLower || raw === 1) {
acc[index] = unit;
}
}
return acc;
}, {} as { [key: number]: any });
}, [isMediumAndLower]);
return (
<Row>
<Col xs={24}>
<Text className={isDetailed ? "preference-detailed-title" : ""}>
{t("pages.preferences.filterTransactionsRange")}
</Text>
</Col>
<Col xs={18}>
<Text>{t("pages.preferences.filterTransactionsRangeDetailed")}</Text>
</Col>
<Col xs={6} style={{ textAlign: "right" }}>
<Switch
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
onChange={(checked: boolean) => {
setFilterTransactions(checked);
}}
checked={filterTransactions}
/>
</Col>
<Col xs={22} push={1}>
<Slider
style={{ marginTop: "18px" }}
disabled={!filterTransactions}
dots
reverse
marks={marks()}
min={0}
max={units.length - 1}
step={1}
range
tipFormatter={value => {
const { display } = units[value || 0];
return display || t("pages.preferences.noLimit");
}}
defaultValue={[
units.findIndex(({ raw }) => filterTransactionsRange[0] === raw),
units.findIndex(({ raw }) => filterTransactionsRange[1] === raw),
]}
onAfterChange={value => {
setFilterTransactionsRange([
units[value[0]].raw,
units[value[1]].raw,
]);
}}
/>
</Col>
</Row>
);
}
Example #24
| Source File: FieldsInit.tsx From amiya with MIT License | 4 votes |
|
install = (registerField: (fieldType: string, field: RegisterFieldProps) => void) => {
// 注册输入框
registerField(FORM_TYPE_INPUT, {
type: FORM_TYPE_INPUT,
defaultValue: FORM_DEFAULT_VALUE_INPUT,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
return readonly ? (
<span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
) : (
<Input
placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
disabled={readonly}
maxLength={INPUT_DEFAULT_MAXLENGTH}
allowClear={FORM_DEFAULT_ALLOW_CLEAR}
{...omitObj(field.props, 'readonly')}
/>
)
}
})
// 注册搜索框
registerField(FORM_TYPE_SEARCH, {
type: FORM_TYPE_SEARCH,
defaultValue: FORM_DEFAULT_VALUE_SEARCH,
render: ({ field, readonly, getFieldValue, formInstans }: AnyKeyProps) => {
return readonly ? (
<span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
) : (
<Input.Search
placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
disabled={readonly}
onPressEnter={e => {
e.preventDefault()
formInstans.submit()
}}
onSearch={() => formInstans.submit()}
maxLength={INPUT_DEFAULT_MAXLENGTH}
allowClear={FORM_DEFAULT_ALLOW_CLEAR}
enterButton
{...field.props}
/>
)
}
})
// 注册数字框
registerField(FORM_TYPE_NUMBER, {
type: FORM_TYPE_NUMBER,
defaultValue: FORM_DEFAULT_VALUE_NUMBER,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
readonly ? (
<span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
) : (
<InputNumber
className="max-width"
disabled={readonly}
min={NUMBER_DEFAULT_MIN}
max={NUMBER_DEFAULT_MAX}
{...field.props}
/>
)
})
// 注册百分比数字框
registerField(FORM_TYPE_PERCENT, {
type: FORM_TYPE_PERCENT,
defaultValue: FORM_DEFAULT_VALUE_PERCENT,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
readonly ? (
<span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}%</span>
) : (
<InputNumber
className="max-width"
disabled={readonly}
min={NUMBER_DEFAULT_MIN}
max={PERCENT_DEFAULT_MAX}
formatter={(value?: string | number) => (value !== '' ? `${value}%` : '')}
parser={(value?: string) => (value || '').replace('%', '')}
{...field.props}
/>
)
})
// 注册密码框
registerField(FORM_TYPE_PASSWORD, {
type: FORM_TYPE_PASSWORD,
defaultValue: FORM_DEFAULT_VALUE_PASSWORD,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
readonly ? (
<span className="ay-form-text">
{(getFieldValue(field.key) + '').replace(/./g, '*') || FORM_READONLY_EMPTY}
</span>
) : (
<Input.Password
placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
disabled={readonly}
allowClear={FORM_DEFAULT_ALLOW_CLEAR}
{...field.props}
/>
)
})
// 注册多行文本框
registerField(FORM_TYPE_TEXTAREA, {
type: FORM_TYPE_TEXTAREA,
defaultValue: FORM_DEFAULT_VALUE_TEXTAREA,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) =>
readonly ? (
<span className="ay-form-text">{getFieldValue(field.key) || FORM_READONLY_EMPTY}</span>
) : (
<Input.TextArea
placeholder={`${locale.form.pleaseInput}${field.title || ''}${locale.form.pleaseInputAfter}`}
disabled={readonly}
allowClear={FORM_DEFAULT_ALLOW_CLEAR}
maxLength={TEXTAREA_DEFAULT_MAXLENGTH}
{...field.props}
/>
)
})
// 注册选择框
registerField(FORM_TYPE_SELECT, {
type: FORM_TYPE_SELECT,
defaultValue: FORM_DEFAULT_VALUE_SELECT,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
if (readonly) {
let value = getFieldValue(field.key)
let text = ''
if (Array.isArray(value)) {
if (!value.length) {
text = FORM_READONLY_EMPTY
}
text = value.map(item => getValueByOptions(item, field.options)).join(field.splitText || '、')
} else {
text = getValueByOptions(value, field.options)
}
return <span className="ay-form-text">{text || FORM_READONLY_EMPTY}</span>
}
return (
<AySelect
placeholder={`${locale.form.pleaseSelect}${field.title || ''}${locale.form.pleaseSelectAfter}`}
disabled={readonly}
allowClear={FORM_DEFAULT_ALLOW_CLEAR}
options={field.options}
{...field.props}
/>
)
}
})
// 注册开关
registerField(FORM_TYPE_SWITCH, {
type: FORM_TYPE_SWITCH,
defaultValue: FORM_DEFAULT_VALUE_SWITCH,
valuePropName: 'checked',
render: ({ field, readonly }: AnyKeyProps) => <Switch disabled={readonly} {...field.props} />
})
// 注册单个选择框
registerField(FORM_TYPE_CHECKBOX, {
type: FORM_TYPE_CHECKBOX,
defaultValue: FORM_DEFAULT_VALUE_CHECKBOX,
valuePropName: 'checked',
render: ({ field, readonly }: AnyKeyProps) => <Checkbox disabled={readonly} {...field.props} />
})
// 注册多个选择框
registerField(FORM_TYPE_CHECKBOX_GROUP, {
type: FORM_TYPE_CHECKBOX_GROUP,
defaultValue: FORM_DEFAULT_VALUE_CHECKBOX_GROUP,
render: ({ field, readonly }: AnyKeyProps) => (
<Checkbox.Group disabled={readonly} options={field.options} {...field.props} />
)
})
// 注册多个单选框
registerField(FORM_TYPE_RADIO_GROUP, {
type: FORM_TYPE_RADIO_GROUP,
defaultValue: FORM_DEFAULT_VALUE_RADIO_GROUP,
render: ({ field, readonly }: AnyKeyProps) => (
<Radio.Group disabled={readonly} options={field.options} {...field.props} />
)
})
// 注册日期
registerField(FORM_TYPE_DATE, {
type: FORM_TYPE_DATE,
defaultValue: FORM_DEFAULT_VALUE_DATE,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
let text = getFieldValue(field.key, readonly)
if (typeof text !== 'string') {
text = ''
}
return readonly ? (
<span className="ay-form-text">{text || FORM_READONLY_EMPTY}</span>
) : (
<DatePicker
className="max-width"
placeholder={`${locale.form.pleaseSelect}${field.title || ''}${locale.form.pleaseSelectAfter}`}
{...field.props}
/>
)
}
})
// 注册区间日期
registerField(FORM_TYPE_DATE_RANGE, {
type: FORM_TYPE_DATE_RANGE,
defaultValue: FORM_DEFAULT_VALUE_DATE_RANGE,
render: ({ field, readonly, getFieldValue }: AnyKeyProps) => {
let text = getFieldValue(field.key, readonly)
if (Array.isArray(text)) {
if (text[0] === null) {
text = null
} else if (text) {
text = [
<span key="start" style={{ display: 'inline-block' }}>
{(text[0] || '').toString()}
</span>,
<span key="divider" style={{ margin: '0 0.5em' }}>
{locale.form.dateTo}
</span>,
<span key="end" style={{ display: 'inline-block' }}>
{(text[1] || '').toString()}
</span>
]
}
}
return readonly ? (
<span className="ay-form-text">{text || FORM_READONLY_EMPTY}</span>
) : (
<DatePicker.RangePicker
placeholder={[locale.form.startDate, locale.form.endDate]}
className="max-width"
{...field.props}
/>
)
}
})
// 注册空节点
registerField(FORM_TYPE_EMPTY, {
type: FORM_TYPE_EMPTY,
defaultValue: FORM_DEFAULT_VALUE_EMPTY,
render: () => <input hidden type="text" />
})
// 注册评分
registerField(FORM_TYPE_RATE, {
type: FORM_TYPE_RATE,
defaultValue: FORM_DEFAULT_VALUE_RATE,
render: ({ field, readonly }: AnyKeyProps) => <Rate disabled={readonly} {...field.props} />
})
// 滑动输入条
registerField(FORM_TYPE_SLIDER, {
type: FORM_TYPE_SLIDER,
defaultValue: FORM_DEFAULT_VALUE_SLIDER,
render: ({ field, readonly }: AnyKeyProps) => <Slider disabled={readonly} {...field.props} />
})
// 标签选择
registerField(FORM_TYPE_TAG_GROUP, {
type: FORM_TYPE_TAG_GROUP,
defaultValue: FORM_DEFAULT_VALUE_TAG_GROUP,
render: ({ field, readonly }: AnyKeyProps) => (
<AyTagGroup readonly={readonly} options={field.options} {...field.props} />
)
})
// 卡片选择
registerField(FORM_TYPE_CARD_GROUP, {
type: FORM_TYPE_CARD_GROUP,
defaultValue: FORM_DEFAULT_VALUE_CARD_GROUP,
render: ({ field, readonly }: AnyKeyProps) => (
<AyCardGroup readonly={readonly} options={field.options} {...field.props} />
)
})
// 注册 html
registerField(FORM_TYPE_HTML, {
type: FORM_TYPE_HTML,
defaultValue: FORM_DEFAULT_VALUE_HTML,
render: ({ field }: AnyKeyProps) => <div dangerouslySetInnerHTML={{ __html: field.html }}></div>
})
}
Example #25
| Source File: slider.input.tsx From ui with GNU Affero General Public License v3.0 | 4 votes |
|
builder: FieldInputBuilderType = ({
parseUrlValue,
parseValue,
}) => function SliderInput ({
field,
urlValue,
focus,
}) {
const [min, setMin] = useState<number>()
const [max, setMax] = useState<number>()
const [step, setStep] = useState<number>()
const [loading, setLoading] = useState(true)
const { t } = useTranslation()
useEffect(() => {
field.options.forEach((option) => {
if (option.key === 'min') {
try {
setMin(JSON.parse(option.value))
} catch (e) {
logger('invalid min value %O', e)
}
}
if (option.key === 'max') {
try {
setMax(JSON.parse(option.value))
} catch (e) {
logger('invalid max value %O', e)
}
}
if (option.key === 'step') {
try {
setStep(JSON.parse(option.value))
} catch (e) {
logger('invalid step value %O', e)
}
}
})
setLoading(false)
}, [field])
let initialValue: number = undefined
if (field.defaultValue) {
try {
initialValue = parseValue(field.defaultValue)
} catch (e) {
logger('invalid default value %O', e)
}
}
if (urlValue) {
initialValue = parseUrlValue(urlValue)
}
if (loading) {
return (
<div>
<Spin />
</div>
)
}
return (
<div>
<Form.Item
name={[field.id]}
rules={[{ required: field.required, message: t('validation:valueRequired') }]}
initialValue={initialValue}
>
<Slider
autoFocus={focus}
min={min}
max={max}
step={step}
tooltipVisible={true}
dots={(max - min) / step <= 10}
/>
</Form.Item>
</div>
)
}
Example #26
| Source File: slider.admin.tsx From ui with GNU Affero General Public License v3.0 | 4 votes |
|
SliderAdmin: React.FC<FieldAdminProps> = (props) => {
const { t } = useTranslation()
return (
<div>
<Form.Item shouldUpdate noStyle>
{(form) => {
//const prefix = React.useContext(FormItemContext).prefixName
const prefix = (form as any).prefixName
const getValue = (name, defaultValue: number): number => {
const current: unknown = form.getFieldValue([
...prefix,
props.field.name as string,
'optionKeys',
name,
])
if (!current) {
return defaultValue
}
return parseFloat(current as string)
}
const max = getValue('max', 100)
const min = getValue('min', 0)
const step = getValue('step', 1)
return (
<Form.Item
label={t('type:slider.default')}
name={[props.field.name as string, 'defaultValue']}
labelCol={{ span: 6 }}
getValueProps={(value: string) => ({ value: value ? parseFloat(value) : undefined })}
>
<Slider min={min} max={max} step={step} dots={(max - min) / step <= 10} />
</Form.Item>
)
}}
</Form.Item>
<Form.Item
label={t('type:slider.min')}
name={[
props.field.name as string,
'optionKeys',
'min',
]}
labelCol={{ span: 6 }}
initialValue={0}
>
<InputNumber />
</Form.Item>
<Form.Item
label={t('type:slider.max')}
name={[
props.field.name as string,
'optionKeys',
'max',
]}
labelCol={{ span: 6 }}
initialValue={100}
>
<InputNumber />
</Form.Item>
<Form.Item
label={t('type:slider.step')}
name={[
props.field.name as string,
'optionKeys',
'step',
]}
labelCol={{ span: 6 }}
initialValue={1}
>
<InputNumber />
</Form.Item>
</div>
)
}
Example #27
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () => (
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name="h1">
<Typography.Title></Typography.Title>
</Variant>
<Variant name="h2">
<Typography.Title level={2}></Typography.Title>
</Variant>
<Variant name="h3">
<Typography.Title level={3}></Typography.Title>
</Variant>
<Variant name="h4">
<Typography.Title level={4}></Typography.Title>
</Variant>
<Variant name="h5">
<Typography.Title level={5}></Typography.Title>
</Variant>
</Component>
<Component name="Text">
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name="Secondary">
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name="Success">
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name="Warning">
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name="Danger">
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name="Disabled">
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary"></Button>
</Variant>
<Variant name="Link">
<Button type="link"></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={["click"]}
overlay={
<Menu>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
</Menu>
}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name="Switch">
<Variant>
<Switch />
</Variant>
</Component>
<Component name="Radio Group">
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name="Button">
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name="Number">
<InputNumber />
</Variant>
</Component>
<Component name="Select">
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name="Multiple">
<Select defaultValue={["1"]} mode="multiple" allowClear>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank"></Typography.Link>
</Variant>
</Component>
<Component name="Slider">
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name="Range">
<Slider range defaultValue={[20, 50]} />
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=""
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name="Tab Pane">
<Tabs.TabPane></Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey="1">
<Collapse.Panel
header="This is panel header 1"
key="1"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 2"
key="2"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 3"
key="3"
></Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image width={200} src="" />
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}></Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name="List">
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => <List.Item></List.Item>}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name="Up">
<ArrowUpOutlined />
</Variant>
<Variant name="Down">
<ArrowDownOutlined />
</Variant>
<Variant name="Left">
<ArrowLeftOutlined />
</Variant>
<Variant name="Right">
<ArrowRightOutlined />
</Variant>
</Component>
<Component name="Question">
<Variant>
<QuestionOutlined />
</Variant>
<Variant name="Circle">
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name="Plus">
<Variant>
<PlusOutlined />
</Variant>
<Variant name="Circle">
<PlusCircleOutlined />
</Variant>
</Component>
<Component name="Info">
<Variant>
<InfoOutlined />
</Variant>
<Variant name="Circle">
<InfoCircleOutlined />
</Variant>
</Component>
<Component name="Exclamation">
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name="Circle">
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name="Close">
<Variant>
<CloseOutlined />
</Variant>
<Variant name="Circle">
<CloseCircleOutlined />
</Variant>
</Component>
<Component name="Check">
<Variant>
<CheckOutlined />
</Variant>
<Variant name="Circle">
<CheckCircleOutlined />
</Variant>
</Component>
<Component name="Edit">
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name="Copy">
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name="Delete">
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name="Bars">
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name="Bell">
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name="Clear">
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name="Download">
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name="Upload">
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name="Sync">
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name="Save">
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name="Search">
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name="Settings">
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name="Paperclip">
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name="Phone">
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name="Mail">
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name="Home">
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name="Contacts">
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name="User">
<Variant>
<UserOutlined />
</Variant>
<Variant name="Add">
<UserAddOutlined />
</Variant>
<Variant name="Remove">
<UserDeleteOutlined />
</Variant>
</Component>
<Component name="Team">
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
<Category name="Screens">
<Component name="ExampleCustomScreen">
<Variant>
<ExampleCustomScreen />
</Variant>
</Component>
<Component name="CustomEntityFilterTest">
<Variant>
<CustomEntityFilterTest />
</Variant>
</Component>
<Component name="CustomFormControls">
<Variant>
<CustomFormControls />
</Variant>
</Component>
<Component name="CustomDataDisplayComponents">
<Variant>
<CustomDataDisplayComponents />
</Variant>
</Component>
<Component name="CustomAppLayouts">
<Variant>
<CustomAppLayouts />
</Variant>
</Component>
<Component name="CustomControls">
<Variant>
<CustomControls />
</Variant>
</Component>
<Component name="ErrorBoundaryTests">
<Variant>
<ErrorBoundaryTests />
</Variant>
</Component>
<Component name="TestBlankScreen">
<Variant>
<TestBlankScreen />
</Variant>
</Component>
<Component name="CarEditor">
<Variant>
<CarEditor />
</Variant>
</Component>
<Component name="CarBrowserCards">
<Variant>
<CarBrowserCards />
</Variant>
</Component>
<Component name="CarBrowserList">
<Variant>
<CarBrowserList />
</Variant>
</Component>
<Component name="CarBrowserTable">
<Variant>
<CarBrowserTable />
</Variant>
</Component>
<Component name="CarCardsGrid">
<Variant>
<CarCardsGrid />
</Variant>
</Component>
<Component name="FavoriteCars">
<Variant>
<FavoriteCars />
</Variant>
</Component>
<Component name="CarCardsWithDetails">
<Variant>
<CarCardsWithDetails />
</Variant>
</Component>
<Component name="CarTableWithFilters">
<Variant>
<CarTableWithFilters />
</Variant>
</Component>
<Component name="CarMasterDetail">
<Variant>
<CarMasterDetail />
</Variant>
</Component>
<Component name="FormWizardCompositionO2O">
<Variant>
<FormWizardCompositionO2O />
</Variant>
</Component>
<Component name="FormWizardEditor">
<Variant>
<FormWizardEditor />
</Variant>
</Component>
<Component name="FormWizardBrowserTable">
<Variant>
<FormWizardBrowserTable />
</Variant>
</Component>
<Component name="CarMultiSelectionTable">
<Variant>
<CarMultiSelectionTable />
</Variant>
</Component>
<Component name="DatatypesTestEditor">
<Variant>
<DatatypesTestEditor />
</Variant>
</Component>
<Component name="DatatypesTestBrowserCards">
<Variant>
<DatatypesTestBrowserCards />
</Variant>
</Component>
<Component name="DatatypesTestBrowserList">
<Variant>
<DatatypesTestBrowserList />
</Variant>
</Component>
<Component name="DatatypesTestBrowserTable">
<Variant>
<DatatypesTestBrowserTable />
</Variant>
</Component>
<Component name="DatatypesTestCards">
<Variant>
<DatatypesTestCards />
</Variant>
</Component>
<Component name="AssociationO2OEditor">
<Variant>
<AssociationO2OEditor />
</Variant>
</Component>
<Component name="AssociationO2OBrowserTable">
<Variant>
<AssociationO2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationO2MEditor">
<Variant>
<AssociationO2MEditor />
</Variant>
</Component>
<Component name="AssociationO2MBrowserTable">
<Variant>
<AssociationO2MBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2OEditor">
<Variant>
<AssociationM2OEditor />
</Variant>
</Component>
<Component name="AssociationM2OBrowserTable">
<Variant>
<AssociationM2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2MEditor">
<Variant>
<AssociationM2MEditor />
</Variant>
</Component>
<Component name="AssociationM2MBrowserTable">
<Variant>
<AssociationM2MBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2OEditor">
<Variant>
<CompositionO2OEditor />
</Variant>
</Component>
<Component name="CompositionO2OBrowserTable">
<Variant>
<CompositionO2OBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2MEditor">
<Variant>
<CompositionO2MEditor />
</Variant>
</Component>
<Component name="CompositionO2MBrowserTable">
<Variant>
<CompositionO2MBrowserTable />
</Variant>
</Component>
<Component name="DeeplyNestedTestEntityEditor">
<Variant>
<DeeplyNestedTestEntityEditor />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityTable">
<Variant>
<DeeplyNestedO2MTestEntityTable />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityEditor">
<Variant>
<DeeplyNestedO2MTestEntityEditor />
</Variant>
</Component>
<Component name="IntIdEditor">
<Variant>
<IntIdEditor />
</Variant>
</Component>
<Component name="IntIdBrowserTable">
<Variant>
<IntIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdBrowserCards">
<Variant>
<IntIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdBrowserList">
<Variant>
<IntIdBrowserList />
</Variant>
</Component>
<Component name="IntIdentityIdCards">
<Variant>
<IntIdentityIdCards />
</Variant>
</Component>
<Component name="IntIdentityIdEditor">
<Variant>
<IntIdentityIdEditor />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserTable">
<Variant>
<IntIdentityIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserCards">
<Variant>
<IntIdentityIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserList">
<Variant>
<IntIdentityIdBrowserList />
</Variant>
</Component>
<Component name="StringIdCards">
<Variant>
<StringIdCards />
</Variant>
</Component>
<Component name="StringIdMgtCardsEdit">
<Variant>
<StringIdMgtCardsEdit />
</Variant>
</Component>
<Component name="StringIdBrowserCards">
<Variant>
<StringIdBrowserCards />
</Variant>
</Component>
<Component name="StringIdBrowserList">
<Variant>
<StringIdBrowserList />
</Variant>
</Component>
<Component name="StringIdBrowserTable">
<Variant>
<StringIdBrowserTable />
</Variant>
</Component>
<Component name="WeirdStringIdEditor">
<Variant>
<WeirdStringIdEditor />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserCards">
<Variant>
<WeirdStringIdBrowserCards />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserList">
<Variant>
<WeirdStringIdBrowserList />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserTable">
<Variant>
<WeirdStringIdBrowserTable />
</Variant>
</Component>
<Component name="BoringStringIdEditor">
<Variant>
<BoringStringIdEditor />
</Variant>
</Component>
<Component name="BoringStringIdBrowserTable">
<Variant>
<BoringStringIdBrowserTable />
</Variant>
</Component>
<Component name="TrickyIdEditor">
<Variant>
<TrickyIdEditor />
</Variant>
</Component>
<Component name="TrickyIdBrowserTable">
<Variant>
<TrickyIdBrowserTable />
</Variant>
</Component>
</Category>
</Palette>
)
Example #28
| Source File: SegmentItem.tsx From slim with Apache License 2.0 | 4 votes |
|
render (): React.ReactNode {
const attributes: Array<{ name: string, value: string }> = [
{
name: 'Property Category',
value: this.props.segment.propertyCategory.CodeMeaning
},
{
name: 'Property Type',
value: this.props.segment.propertyType.CodeMeaning
},
{
name: 'Algorithm Name',
value: this.props.segment.algorithmName
}
]
const settings = (
<div>
<Row justify='center' align='middle'>
<Col span={6}>
Opacity
</Col>
<Col span={12}>
<Slider
range={false}
min={0}
max={1}
step={0.01}
value={this.state.currentStyle.opacity}
onChange={this.handleOpacityChange}
/>
</Col>
<Col span={6}>
<InputNumber
min={0}
max={1}
size='small'
step={0.1}
style={{ width: '65px' }}
value={this.state.currentStyle.opacity}
onChange={this.handleOpacityChange}
/>
</Col>
</Row>
</div>
)
/**
* This hack is required for Menu.Item to work properly:
* https://github.com/react-component/menu/issues/142
*/
const {
defaultStyle,
isVisible,
segment,
metadata,
onVisibilityChange,
onStyleChange,
...otherProps
} = this.props
return (
<Menu.Item
style={{ height: '100%', paddingLeft: '3px' }}
key={this.props.segment.uid}
{...otherProps}
>
<Space align='start'>
<div style={{ paddingLeft: '14px' }}>
<Space direction='vertical' align='end'>
<Switch
size='small'
onChange={this.handleVisibilityChange}
checked={this.props.isVisible}
checkedChildren={<FaEye />}
unCheckedChildren={<FaEyeSlash />}
/>
<Popover
placement='left'
content={settings}
overlayStyle={{ width: '350px' }}
title='Display Settings'
>
<Button
type='primary'
shape='circle'
icon={<SettingOutlined />}
/>
</Popover>
</Space>
</div>
<Description
header={this.props.segment.label}
attributes={attributes}
selectable
hasLongValues
/>
</Space>
</Menu.Item>
)
}
Example #29
| Source File: OpticalPathItem.tsx From slim with Apache License 2.0 | 4 votes |
|
render (): React.ReactNode {
const identifier = this.props.opticalPath.identifier
const description = this.props.opticalPath.description
const attributes: Array<{ name: string, value: string }> = []
if (this.props.opticalPath.illuminationWaveLength !== undefined) {
attributes.push(
{
name: 'Illumination wavelength',
value: `${this.props.opticalPath.illuminationWaveLength} nm`
}
)
}
if (this.props.opticalPath.illuminationColor !== undefined) {
attributes.push(
{
name: 'Illumination color',
value: this.props.opticalPath.illuminationColor.CodeMeaning
}
)
}
// TID 8001 "Specimen Preparation"
const specimenDescriptions: dmv.metadata.SpecimenDescription[] = (
this.props.metadata[0].SpecimenDescriptionSequence ?? []
)
specimenDescriptions.forEach(description => {
const specimenPreparationSteps: dmv.metadata.SpecimenPreparation[] = (
description.SpecimenPreparationSequence ?? []
)
specimenPreparationSteps.forEach(
(step: dmv.metadata.SpecimenPreparation, index: number): void => {
step.SpecimenPreparationStepContentItemSequence.forEach((
item: (
dcmjs.sr.valueTypes.CodeContentItem |
dcmjs.sr.valueTypes.TextContentItem |
dcmjs.sr.valueTypes.UIDRefContentItem |
dcmjs.sr.valueTypes.PNameContentItem |
dcmjs.sr.valueTypes.DateTimeContentItem
),
index: number
) => {
const name = new dcmjs.sr.coding.CodedConcept({
value: item.ConceptNameCodeSequence[0].CodeValue,
schemeDesignator:
item.ConceptNameCodeSequence[0].CodingSchemeDesignator,
meaning: item.ConceptNameCodeSequence[0].CodeMeaning
})
if (item.ValueType === dcmjs.sr.valueTypes.ValueTypes.CODE) {
item = item as dcmjs.sr.valueTypes.CodeContentItem
const value = new dcmjs.sr.coding.CodedConcept({
value: item.ConceptCodeSequence[0].CodeValue,
schemeDesignator:
item.ConceptCodeSequence[0].CodingSchemeDesignator,
meaning: item.ConceptCodeSequence[0].CodeMeaning
})
if (!name.equals(SpecimenPreparationStepItems.PROCESSING_TYPE)) {
if (name.equals(SpecimenPreparationStepItems.STAIN)) {
attributes.push({
name: 'Tissue stain',
value: value.CodeMeaning
})
}
}
} else if (item.ValueType === dcmjs.sr.valueTypes.ValueTypes.TEXT) {
item = item as dcmjs.sr.valueTypes.TextContentItem
if (!name.equals(SpecimenPreparationStepItems.PROCESSING_TYPE)) {
if (name.equals(SpecimenPreparationStepItems.STAIN)) {
attributes.push({
name: 'Tissue stain',
value: item.TextValue
})
}
}
}
})
}
)
})
const maxValue = Math.pow(2, this.props.metadata[0].BitsAllocated) - 1
const title = (
description != null ? `${identifier}: ${description}` : identifier
)
let settings
let item
if (this.props.opticalPath.isMonochromatic) {
// monochrome images that can be pseudo-colored
let colorSettings
if (this.state.currentStyle.color != null) {
colorSettings = (
<>
<Divider plain>
Color
</Divider>
<Row justify='center' align='middle' gutter={[8, 8]}>
<Col span={5}>
Red
</Col>
<Col span={14}>
<Slider
range={false}
min={0}
max={255}
step={1}
value={this.state.currentStyle.color[0]}
onChange={this.handleColorRChange}
/>
</Col>
<Col span={5}>
<InputNumber
min={0}
max={255}
size='small'
style={{ width: '65px' }}
value={this.state.currentStyle.color[0]}
onChange={this.handleColorRChange}
/>
</Col>
</Row>
<Row justify='center' align='middle' gutter={[8, 8]}>
<Col span={5}>
Green
</Col>
<Col span={14}>
<Slider
range={false}
min={0}
max={255}
step={1}
value={this.state.currentStyle.color[1]}
onChange={this.handleColorGChange}
/>
</Col>
<Col span={5}>
<InputNumber
min={0}
max={255}
size='small'
style={{ width: '65px' }}
value={this.state.currentStyle.color[1]}
onChange={this.handleColorGChange}
/>
</Col>
</Row>
<Row justify='center' align='middle' gutter={[8, 8]}>
<Col span={5}>
Blue
</Col>
<Col span={14}>
<Slider
range={false}
min={0}
max={255}
step={1}
value={this.state.currentStyle.color[2]}
onChange={this.handleColorBChange}
/>
</Col>
<Col span={5}>
<InputNumber
min={0}
max={255}
size='small'
style={{ width: '65px' }}
value={this.state.currentStyle.color[2]}
onChange={this.handleColorBChange}
/>
</Col>
</Row>
</>
)
}
let windowSettings
if (this.state.currentStyle.limitValues != null) {
windowSettings = (
<>
<Divider plain>
Values of interest
</Divider>
<Row justify='center' align='middle' gutter={[8, 8]}>
<Col span={6}>
<InputNumber
min={0}
max={this.state.currentStyle.limitValues[1]}
size='small'
style={{ width: '75px' }}
value={this.state.currentStyle.limitValues[0]}
onChange={this.handleLowerLimitChange}
/>
</Col>
<Col span={12}>
<Slider
range
min={0}
max={maxValue}
step={1}
value={[
this.state.currentStyle.limitValues[0],
this.state.currentStyle.limitValues[1]
]}
onChange={this.handleLimitChange}
/>
</Col>
<Col span={6}>
<InputNumber
min={this.state.currentStyle.limitValues[0]}
max={maxValue}
size='small'
style={{ width: '75px' }}
value={this.state.currentStyle.limitValues[1]}
onChange={this.handleUpperLimitChange}
/>
</Col>
</Row>
</>
)
}
settings = (
<div>
{windowSettings}
{colorSettings}
<Divider plain />
<Row justify='center' align='middle' gutter={[8, 8]}>
<Col span={6}>
Opacity
</Col>
<Col span={12}>
<Slider
range={false}
min={0}
max={1}
step={0.01}
value={this.state.currentStyle.opacity}
onChange={this.handleOpacityChange}
/>
</Col>
<Col span={6}>
<InputNumber
min={0}
max={1}
size='small'
step={0.1}
style={{ width: '65px' }}
value={this.state.currentStyle.opacity}
onChange={this.handleOpacityChange}
/>
</Col>
</Row>
</div>
)
const colors = this.getCurrentColors()
item = (
<Badge
offset={[-20, 20]}
count={' '}
style={{
borderStyle: 'solid',
borderWidth: '1px',
borderColor: 'gray',
visibility: this.state.isVisible ? 'visible' : 'hidden',
backgroundImage: `linear-gradient(to right, ${colors.toString()})`
}}
>
<Description
header={title}
attributes={attributes}
selectable
hasLongValues
/>
</Badge>
)
} else {
// color images
settings = (
<div>
<Row justify='center' align='middle' gutter={[8, 8]}>
<Col span={6}>
Opacity
</Col>
<Col span={12}>
<Slider
range={false}
min={0}
max={1}
step={0.01}
value={this.state.currentStyle.opacity}
onChange={this.handleOpacityChange}
/>
</Col>
<Col span={6}>
<InputNumber
min={0}
max={1}
size='small'
step={0.1}
style={{ width: '60px' }}
value={this.state.currentStyle.opacity}
onChange={this.handleOpacityChange}
/>
</Col>
</Row>
</div>
)
item = (
<Description
header={title}
attributes={attributes}
selectable
hasLongValues
/>
)
}
const buttons = []
if (this.props.isRemovable) {
buttons.push(
<Tooltip title='Remove Optical Path'>
<Button
type='default'
shape='circle'
icon={<DeleteOutlined />}
onClick={this.handleRemoval}
/>
</Tooltip>
)
}
const {
defaultStyle,
isRemovable,
isVisible,
metadata,
onVisibilityChange,
onStyleChange,
onRemoval,
opticalPath,
...otherProps
} = this.props
return (
<Menu.Item
style={{ height: '100%', paddingLeft: '3px' }}
key={this.props.opticalPath.identifier}
{...otherProps}
>
<Space align='start'>
<div style={{ paddingLeft: '14px' }}>
<Space direction='vertical' align='end'>
<Switch
size='small'
checked={this.state.isVisible}
onChange={this.handleVisibilityChange}
checkedChildren={<EyeOutlined />}
unCheckedChildren={<EyeInvisibleOutlined />}
/>
<Popover
placement='left'
content={settings}
overlayStyle={{ width: '350px' }}
title='Display Settings'
>
<Button
type='primary'
shape='circle'
icon={<SettingOutlined />}
/>
</Popover>
{buttons}
</Space>
</div>
{item}
</Space>
</Menu.Item>
)
}
