@amaui/ui-react
Version:
UI for React
296 lines (295 loc) • 20.7 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const date_1 = require("@amaui/date");
const style_react_1 = require("@amaui/style-react");
const Path_1 = __importDefault(require("../Path"));
const Type_1 = __importDefault(require("../Type"));
const Surface_1 = __importDefault(require("../Surface"));
const RoundMeter_1 = __importDefault(require("../RoundMeter"));
const Line_1 = __importDefault(require("../Line"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'relative',
userSelect: 'none'
},
timeOfDay: Object.assign(Object.assign({}, theme.typography.values.b2), { textAnchor: 'middle', alignmentBaseline: 'central', dominantBaseline: 'central' }),
version_regular: {
borderRadius: theme.methods.shape.radius.value('rg', 'px')
},
version_regular_size_small: {
minWidth: '174px',
padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(4, 'px')}`
},
version_regular_size_regular: {
minWidth: '204px',
padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(5, 'px')}`
},
version_regular_size_large: {
minWidth: '234px',
padding: `${theme.methods.space.value(4, 'px')} ${theme.methods.space.value(6, 'px')}`
},
shadow_version_regular: {
boxShadow: [theme.shadows.values.default[6], '!important']
},
version_analog: {
background: 'transparent',
'& .amaui-RoundMeter-marks': {
opacity: '0.74'
}
},
shadow_version_analog: {
'& .amaui-RoundMeter-svg': {
filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
}
},
version_minimal: {
background: 'transparent'
},
version_minimal_label: {
'&.amaui-RoundMeter-label': Object.assign({}, theme.typography.values.t2)
},
shadow_version_minimal: {
'& .amaui-RoundMeter-svg': {
filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
}
},
version_modern: {
background: 'transparent'
},
shadow_version_modern: {
'& svg:first-of-type': {
filter: `drop-shadow(0px 6px 10px rgb(0 0 0 / 4%)) drop-shadow(0px 1px 18px rgb(0 0 0 / 1%)) drop-shadow(0px 3px 5px rgb(0 0 0 / 7%))`
}
},
modern_background: {
position: 'absolute',
inset: '0',
width: '100%',
height: 'auto'
},
modernDate: {
textAnchor: 'middle'
}
}), { name: 'amaui-Watch' });
const Watch = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiWatch) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Path = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Path) || Path_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
const RoundMeter = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.RoundMeter) || RoundMeter_1.default; }, [theme]);
const { tonal = true, color = 'primary',
// regular, analog, minimal, modern
version = 'regular', size = 'regular', start = true, timeVisible = true, timeOfDayVisible = true, dateVisible = true, timeFormatString = `HH:mm:ss`, dateFormatString = `d, DD.MM.YYYY`, renderTime, renderDate, shadow, AnalogProps, RegularProps, MinimalProps, ModernProps, Component = 'div', className, children } = props, other = __rest(props, ["tonal", "color", "version", "size", "start", "timeVisible", "timeOfDayVisible", "dateVisible", "timeFormatString", "dateFormatString", "renderTime", "renderDate", "shadow", "AnalogProps", "RegularProps", "MinimalProps", "ModernProps", "Component", "className", "children"]);
const { classes } = useStyle();
const refs = {
value: react_1.default.useRef(undefined),
requestAnimationFrameID: react_1.default.useRef(undefined)
};
const [value, setValue] = react_1.default.useState(date_1.AmauiDate.amauiDate);
const update = react_1.default.useCallback(() => {
setValue(date_1.AmauiDate.amauiDate);
refs.requestAnimationFrameID.current = requestAnimationFrame(update);
}, []);
const marks = react_1.default.useMemo(() => {
return {
analog: (0, utils_1.unique)([
// Hours
...(Array.from({ length: 12 }).map((item, index) => ({
height: 8,
padding: theme.methods.space.value(0.5, 'px'),
position: index * (100 / 12)
}))),
// Minutes
...(Array.from({ length: 60 }).map((item, index) => ({
height: 4,
padding: theme.methods.space.value(0.5, 'px'),
position: index * (100 / 60)
}))),
], 'position')
};
}, []);
const labels = react_1.default.useMemo(() => {
return {
analog: (0, utils_1.unique)([
// Hours
...(Array.from({ length: 12 }).map((item, index) => ({
value: index === 0 ? 12 : index,
padding: theme.methods.space.value(1.5, 'px'),
style: {
fontSize: 14
},
position: index * (100 / 12)
})))
], 'position'),
'minimal': (0, utils_1.unique)([
// Hours
{
value: 12,
padding: theme.methods.space.value(1, 'px'),
style: {
lineHeight: 1,
letterSpacing: 0,
fontSize: 87,
fontWeight: 900
},
position: 0 * (100 / 12)
},
{
value: 3,
padding: theme.methods.space.value(1, 'px'),
style: {
lineHeight: 1,
letterSpacing: 0,
fontSize: 87,
fontWeight: 900
},
position: 3 * (100 / 12)
},
{
value: 6,
padding: theme.methods.space.value(1, 'px'),
style: {
lineHeight: 1,
letterSpacing: 0,
fontSize: 87,
fontWeight: 900
},
position: 6 * (100 / 12)
},
{
value: 9,
padding: theme.methods.space.value(1, 'px'),
style: {
lineHeight: 1,
letterSpacing: 0,
fontSize: 87,
fontWeight: 900
},
position: 9 * (100 / 12)
}
], 'position')
};
}, []);
react_1.default.useEffect(() => {
if (!start) {
cancelAnimationFrame(refs.requestAnimationFrameID.current);
}
else {
refs.requestAnimationFrameID.current = requestAnimationFrame(update);
}
return () => {
// Clean up
cancelAnimationFrame(refs.requestAnimationFrameID.current);
};
}, [start]);
return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ ref: ref, tonal: tonal, color: color, Component: Component, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Watch', theme) && [
'amaui-Watch-root',
`amaui-Watch-version-${version}`,
`amaui-Watch-size-${size}`
],
className,
classes.root,
classes[`version_${version.replace('-', '_')}`],
classes[`version_${version.replace('-', '_')}_size_${size}`],
shadow && classes[`shadow_version_${version.replace('-', '_')}`]
]) }, other, { children: (0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color }, { children: ({ backgroundColor, palette }) => {
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [version === 'regular' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'column', align: 'center', justify: 'center' }, RegularProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Watch', theme) && [
'amaui-Watch-regular'
],
RegularProps === null || RegularProps === void 0 ? void 0 : RegularProps.className,
classes.regular
]) }, { children: [timeVisible && ((0, utils_1.is)('function', renderTime) ? renderTime(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3' }, { children: (0, date_1.format)(value, timeFormatString) })))), dateVisible && ((0, utils_1.is)('function', renderDate) ? renderDate(value) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', priority: 'secondary' }, { children: (0, date_1.format)(value, dateFormatString) }))))] }))), version === 'analog' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, marks: marks.analog, labels: labels.analog, background: true }, AnalogProps, { children: [timeOfDayVisible && ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: 120, y: 74, stroke: 'none', fill: 'currentColor', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Watch', theme) && [
'amaui-Watch-time-of-day'
],
classes.timeOfDay
]), style: {
fontSize: 11
} }, { children: (0, date_1.format)(value, `A`) }))), (0, jsx_runtime_1.jsx)(Path, { Component: 'rect', value: (100 / 12) * value.hour, x: 120, y: 120 - (5 / 2), height: 5, width: 57, style: {
transformOrigin: '50% 50%',
stroke: 'none',
fill: 'currentColor'
} }), (0, jsx_runtime_1.jsx)(Path, { Component: 'rect', value: (100 / 60) * value.minute, x: 120, y: 120 - (3 / 2), height: 3, width: 105, style: {
transformOrigin: '50% 50%',
stroke: 'none',
fill: 'currentColor'
} }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 120 L ${(0, utils_2.angleToCoordinates)(0, 120, 120, 115).x} ${(0, utils_2.angleToCoordinates)(0, 120, 120, 115).y}`, value: (100 / 60) * value.second, style: {
transformOrigin: '50% 50%',
stroke: 'currentColor'
} }), (0, jsx_runtime_1.jsx)(Path, { Component: 'circle', r: '4', cx: '120', cy: '120', style: {
fill: 'currentColor',
stroke: color,
strokeWidth: 1
} })] }))), version === 'minimal' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, labels: labels['minimal'], arcsVisible: false, LabelProps: {
className: classes.version_minimal_label,
style: {
fill: theme.methods.palette.color.value(undefined, 60, true, palette)
}
}, background: true }, MinimalProps, { children: [(0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 12) * value.hour, style: {
transformOrigin: '50% 50%',
stroke: 'none',
fill: theme.methods.palette.color.value(undefined, 30, true, palette)
} }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 118 L 217 118 A 1 1 0 0 1 217 122 L 120 122 A 1 1 0 0 1 120 118`, value: (100 / 60) * value.minute, style: {
transformOrigin: '50% 50%',
stroke: 'none',
fill: theme.methods.palette.color.value(undefined, 20, true, palette)
} }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 119.5 L 217 119.5 A 1 1 0 0 1 217 120.5 L 120 120.5 A 1 1 0 0 1 120 119.5`, value: (100 / 60) * value.second, style: {
transformOrigin: '50% 50%',
stroke: 'none',
fill: theme.methods.palette.color.value(undefined, 10, true, palette)
} }), (0, jsx_runtime_1.jsx)(Path, { Component: 'circle', r: '3', cx: '120', cy: '120', style: {
stroke: 'none',
fill: theme.methods.palette.color.value(undefined, 10, true, palette)
} })] }))), version === 'modern' && ((0, jsx_runtime_1.jsxs)(RoundMeter, Object.assign({ tonal: tonal, color: color, size: size, arcsVisible: false, additional: ((0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: '0 0 240 240', xmlns: 'http://www.w3.org/2000/svg', fill: theme.methods.palette.color.value(undefined, 10, false, palette), className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Watch', theme) && [
'amaui-Watch-modern-background'
],
classes.modern_background
]) }, { children: (0, jsx_runtime_1.jsx)("path", { d: 'M109.976 2.90439C116.096 -0.528799 123.562 -0.528799 129.683 2.90439L143.879 10.8678C146.815 12.5147 150.117 13.3994 153.483 13.4411L169.759 13.6427C176.776 13.7296 183.241 17.4627 186.825 23.496L195.138 37.4906C196.857 40.3849 199.274 42.802 202.168 44.5212L216.163 52.8337C222.196 56.4175 225.929 62.8832 226.016 69.9001L226.218 86.1761C226.26 89.5422 227.144 92.8441 228.791 95.78L236.755 109.976C240.188 116.096 240.188 123.563 236.755 129.683L228.791 143.879C227.144 146.815 226.26 150.117 226.218 153.483L226.016 169.759C225.929 176.776 222.196 183.242 216.163 186.825L202.168 195.138C199.274 196.857 196.857 199.274 195.138 202.168L186.825 216.163C183.241 222.196 176.776 225.929 169.759 226.016L153.483 226.218C150.117 226.26 146.815 227.144 143.879 228.791L129.683 236.755C123.562 240.188 116.096 240.188 109.976 236.755L95.7799 228.791C92.844 227.144 89.5421 226.26 86.1761 226.218L69.9001 226.016C62.8832 225.929 56.4174 222.196 52.8337 216.163L44.5211 202.168C42.802 199.274 40.3848 196.857 37.4906 195.138L23.496 186.825C17.4626 183.242 13.7296 176.776 13.6427 169.759L13.4411 153.483C13.3994 150.117 12.5147 146.815 10.8678 143.879L2.90436 129.683C-0.52883 123.563 -0.528829 116.096 2.90436 109.976L10.8678 95.78C12.5147 92.8441 13.3994 89.5422 13.4411 86.1761L13.6427 69.9001C13.7296 62.8832 17.4626 56.4175 23.496 52.8337L37.4906 44.5212C40.3848 42.802 42.802 40.3849 44.5211 37.4906L52.8337 23.496C56.4174 17.4627 62.8832 13.7296 69.9001 13.6427L86.1761 13.4411C89.5421 13.3994 92.844 12.5147 95.78 10.8678L109.976 2.90439Z' }) }))) }, ModernProps, { children: [(0, jsx_runtime_1.jsx)(Path, Object.assign({ Component: 'g', value: (100 / 60) * value.second, style: {
transformOrigin: 'center'
} }, { children: (0, jsx_runtime_1.jsx)("text", Object.assign({ x: 25, y: 130, stroke: 'none', fill: theme.methods.palette.color.value(undefined, 90, false, palette), transform: 'rotate(-90, 25, 120)', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Watch', theme) && [
'amaui-Watch-modern-date'
],
classes.modernDate
]), style: {
fontSize: 19
} }, { children: (0, date_1.format)(value, `d DD`) })) })), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 170 114 A 1 1 0 0 1 170 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 12) * value.hour, style: {
transformOrigin: '50% 50%',
stroke: 'none',
fill: palette[20]
} }), (0, jsx_runtime_1.jsx)(Path, { d: `M 120 114 L 194 114 A 1 1 0 0 1 194 126 L 120 126 A 1 1 0 0 1 120 114`, value: (100 / 60) * value.minute, style: {
transformOrigin: '50% 50%',
stroke: 'none',
fill: palette[30]
} }), (0, jsx_runtime_1.jsx)(Path, { Component: 'circle', r: '8', cx: '215', cy: '120', value: (100 / 60) * value.second, style: {
stroke: 'none',
fill: palette[50],
transformOrigin: 'center'
} })] })))] });
} })) })));
});
Watch.displayName = 'amaui-Watch';
exports.default = Watch;