mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-27 01:40:07 +02:00
103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
|
|
import styled from 'styled-components';
|
|
import { Text13, Text18 } from './Typography';
|
|
import { Button } from './Button';
|
|
import { ColorInput } from './Input';
|
|
import { Slider } from './Slider';
|
|
|
|
export interface CustomizationEditorProps {
|
|
customizations: IconListCustomizations;
|
|
// eslint-disable-next-line no-unused-vars
|
|
onChange: (customizations: IconListCustomizations) => void;
|
|
}
|
|
export function CustomizationEditor({
|
|
customizations,
|
|
onChange,
|
|
}: CustomizationEditorProps) {
|
|
const [, startTransition] = (React as any).useTransition();
|
|
const [color, setColor] = React.useState(customizations.hexColor);
|
|
const [size, setSize] = React.useState(customizations.size);
|
|
const [strokeWidth, setStrokeWidth] = React.useState(
|
|
customizations.strokeWidth
|
|
);
|
|
React.useEffect(() => {
|
|
setColor(customizations.hexColor);
|
|
setSize(customizations.size);
|
|
setStrokeWidth(customizations.strokeWidth);
|
|
}, [customizations]);
|
|
|
|
function updateCustomizations(partial: Partial<IconListCustomizations>) {
|
|
startTransition(() => {
|
|
onChange({
|
|
...customizations,
|
|
...partial,
|
|
});
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Header>
|
|
<Text18 style={{ fontWeight: 700, color: 'var(--black)' }}>
|
|
Customize
|
|
</Text18>
|
|
<Button onClick={() => onChange(DEFAULT_CUSTOMIZATIONS)}>Reset</Button>
|
|
</Header>
|
|
<Field>
|
|
<Slider
|
|
label={'Size'}
|
|
minValue={12}
|
|
maxValue={128}
|
|
value={[size]}
|
|
formatOptions={{ maximumFractionDigits: 0 }}
|
|
onChange={(values) => {
|
|
setSize(values[0]);
|
|
updateCustomizations({ size: values[0] });
|
|
}}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<Slider
|
|
label={'Stroke Width'}
|
|
minValue={0.5}
|
|
maxValue={3}
|
|
value={[strokeWidth]}
|
|
step={0.01}
|
|
formatOptions={{ maximumFractionDigits: 1 }}
|
|
onChange={(values) => {
|
|
setStrokeWidth(values[0]);
|
|
updateCustomizations({ strokeWidth: values[0] });
|
|
}}
|
|
/>
|
|
</Field>
|
|
<HorizontalField>
|
|
<Text13>Color</Text13>
|
|
<ColorInput
|
|
type={'color'}
|
|
value={color}
|
|
onChange={(e) => {
|
|
setColor(e.target.value);
|
|
updateCustomizations({ hexColor: e.target.value });
|
|
}}
|
|
/>
|
|
</HorizontalField>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const Header = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 45px;
|
|
`;
|
|
const Field = styled.div`
|
|
margin-bottom: 35px;
|
|
`;
|
|
const HorizontalField = styled(Field)`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
`;
|