@amaui/ui-react
Version:
UI for React
255 lines (254 loc) • 14.4 kB
JavaScript
;
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 style_react_1 = require("@amaui/style-react");
const IconMaterialCircleW100Filled_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCircleW100Filled"));
const IconMaterialNightlightW100Filled_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialNightlightW100Filled"));
const IconMaterialCloudW100Filled_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloudW100Filled"));
const IconMaterialRainyW100Filled_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialRainyW100Filled"));
const IconMaterialCloudySnowingW100Filled_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloudySnowingW100Filled"));
const Surface_1 = __importDefault(require("../Surface"));
const Type_1 = __importDefault(require("../Type"));
const Fade_1 = __importDefault(require("../Fade"));
const Transitions_1 = __importDefault(require("../Transitions"));
const utils_2 = require("../utils");
const IconWeather = react_1.default.forwardRef((props, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
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 { tonal, color: color_, style } = props, other = __rest(props, ["tonal", "color", "style"]);
return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color_ }, { children: ({ color, backgroundColor }) => ((0, jsx_runtime_1.jsx)("svg", Object.assign({ ref: ref, viewBox: '0 0 177 178', xmlns: 'http://www.w3.org/2000/svg' }, other, { style: Object.assign(Object.assign({}, style), { color, fill: backgroundColor }) }, { children: (0, jsx_runtime_1.jsx)("path", { d: 'M93.964 1.5C85.944 3.181 78.964 4.033 66.185 12.689C62.393 14.903 52.521 23.956 36.901 39.544C15.559 60.841 12.951 63.812 9.244 71.058C2.449 84.337 0.5 92.138 0.5 106.058C0.5 115.812 0.935 119.455 2.826 125.523C10.658 150.657 27.954 167.964 52.964 175.692C59.053 177.573 62.722 178.008 72.464 178C86.543 177.99 93.354 176.43 105.964 170.329C114.063 166.411 115.649 165.033 139.556 141.138C162.652 118.054 166.644 113.063 170.5 105.504C175.5 93.058 176.964 86.676 176.964 74.212C176.964 61.815 175.094 53.787 169.473 42.058C160.683 23.716 143.356 9.513 123.082 4.033C114.951 1.835 101.984 -0.181001 93.964 1.5Z' }) }))) })));
});
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'relative',
aspectRatio: '1',
width: '100vw',
'&.amaui-Surface-root': {
background: 'transparent'
}
},
text: {
position: 'absolute',
textAlign: 'center',
fontWeight: '500',
lineHeight: '1',
userSelect: 'none'
},
text_regular: {
top: '22%',
width: '100%',
paddingLeft: '30%',
paddingRight: '11%',
fontSize: '34%'
},
text_large: {
top: '22%',
width: '100%',
paddingLeft: '27%',
paddingRight: '11%',
fontSize: '30%'
},
icon_background: {
'&.amaui-Icon-root': {
width: '100%',
height: 'auto'
}
},
icon_background_shadow: {
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%))`
},
icon_dayTime: {
'&.amaui-Icon-root': {
position: 'absolute',
zIndex: '1',
bottom: '21%',
width: '40% !important',
height: 'auto',
left: '13%'
}
},
icon_dayTime_day: {
'&.amaui-Icon-root': {
color: '#fcc21d'
}
},
icon_dayTime_night: {
'&.amaui-Icon-root': {
color: '#dfe0e2'
}
},
icon_weather: {
position: 'absolute',
width: '40% !important',
height: 'auto',
zIndex: '4'
},
icon_arrangement_regular: {
bottom: '22%',
left: '15%',
},
icon_arrangement_pair: {
bottom: '8%',
left: '25%',
opacity: '0.94 !important'
},
icon_weather_cloudy: {
'&.amaui-Icon-root': {
color: '#f1f3f4'
}
},
icon_weather_rainy: {
'&.amaui-Icon-root': {
color: '#e6f5fc'
}
},
icon_weather_snowy: {
'&.amaui-Icon-root': {
color: '#dcf0ff'
}
},
size_small: {
maxWidth: '120px'
},
size_regular: {
maxWidth: '180px'
},
size_large: {
maxWidth: '240px'
}
}), { name: 'amaui-Weather' });
const Weather = 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.amauiWeather) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
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 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 Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
const Transitions = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transitions) || Transitions_1.default; }, [theme]);
const { tonal = true, color = 'primary', version = 'filled', size = 'regular', shadow, dayTime: dayTime_, weather: weather_, temperature: temperature_, values: values_,
// Once every 1 hour
interval = 60 * 60 * 1e3, IconDay = IconMaterialCircleW100Filled_1.default, IconNight = IconMaterialNightlightW100Filled_1.default, IconCloud = IconMaterialCloudW100Filled_1.default, IconRain = IconMaterialRainyW100Filled_1.default, IconSnow = IconMaterialCloudySnowingW100Filled_1.default, IconProps: IconProps_, Component = 'div', className, style } = props, other = __rest(props, ["tonal", "color", "version", "size", "shadow", "dayTime", "weather", "temperature", "values", "interval", "IconDay", "IconNight", "IconCloud", "IconRain", "IconSnow", "IconProps", "Component", "className", "style"]);
const { classes } = useStyle();
const [rect, setRect] = react_1.default.useState();
const [values, setValues] = react_1.default.useState(values_ !== undefined ? values_ : {
dayTime: dayTime_ !== undefined ? dayTime_ : 'day',
weather: weather_ !== undefined ? weather_ : 'clear',
temperature: temperature_ !== undefined ? temperature_ : '14'
});
const refs = {
root: react_1.default.useRef(undefined),
values: react_1.default.useRef(undefined)
};
refs.values.current = values;
const styles = {
root: {}
};
react_1.default.useEffect(() => {
const method = () => { var _a; return setRect((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()); };
const observer = new ResizeObserver(method);
method();
observer.observe(refs.root.current);
return () => {
observer.disconnect();
};
}, []);
react_1.default.useEffect(() => {
if (values_ !== undefined && values_ !== refs.values.current)
setValues(values_);
}, [values_]);
react_1.default.useEffect(() => {
if (dayTime_ !== undefined && dayTime_ !== refs.values.current.dayTime)
setValues(values__ => (Object.assign(Object.assign({}, values__), { dayTime: dayTime_ })));
}, [dayTime_]);
react_1.default.useEffect(() => {
if (weather_ !== undefined && weather_ !== refs.values.current.weather)
setValues(values__ => (Object.assign(Object.assign({}, values__), { weather: weather_ })));
}, [weather_]);
react_1.default.useEffect(() => {
if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature)
setValues(values__ => (Object.assign(Object.assign({}, values__), { temperature: temperature_ })));
}, [temperature_]);
if (!['small', 'regular', 'large'].includes(size))
styles.root.maxWidth = size;
const IconProps = Object.assign({ color: 'unset' }, IconProps_);
let IconDayTime = IconDay;
if (['day'].includes(values.dayTime))
IconDayTime = IconDay;
if (['night'].includes(values.dayTime))
IconDayTime = IconNight;
let IconWeather_ = IconCloud;
if (['partly clear', 'cloudy'].includes(values.weather))
IconWeather_ = IconCloud;
if (['rainy'].includes(values.weather))
IconWeather_ = IconRain;
if (['snowy'].includes(values.weather))
IconWeather_ = IconSnow;
const useDayTime = ['clear', 'partly clear'].includes(values.weather);
const useWeather = !['clear'].includes(values.weather);
return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, tonal: tonal, color: color, version: version, Component: Component, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Weather', theme) && [
'amaui-Weather-root',
`amaui-Weather-version-${version}`,
`amaui-Weather-size-${size}`
],
className,
classes.root,
classes[`size_${size}`]
]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: [(0, jsx_runtime_1.jsx)(IconWeather, { tonal: tonal, color: color, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Weather', theme) && [
'amaui-Weather-icon-background'
],
classes.icon_background,
shadow && classes.icon_background_shadow
]) }), (0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: values.temperature !== undefined }, { children: (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'd1', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Weather', theme) && [
'amaui-Weather-text'
],
classes.text,
classes[`text_${+values.temperature < 100 ? 'regular' : 'large'}`]
]), style: {
fontSize: `${((rect === null || rect === void 0 ? void 0 : rect.width) || 0) * (+values.temperature < 100 ? +values.temperature < -10 ? 0.32 : 0.34 : 0.27)}px`
} }, { children: [values.temperature, "\u00B0"] })) })), useDayTime && ((0, jsx_runtime_1.jsx)(Transitions, { children: (0, jsx_runtime_1.jsx)(Fade, { children: (0, jsx_runtime_1.jsx)(IconDayTime, Object.assign({}, IconProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Weather', theme) && [
'amaui-Weather-icon',
'amaui-Weather-icon-day-time'
],
IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
classes.icon_dayTime,
classes[`icon_dayTime_${values.dayTime}`]
]) })) }, values.dayTime) })), useWeather && values.weather && ((0, jsx_runtime_1.jsx)(Transitions, { children: (0, jsx_runtime_1.jsx)(Fade, { children: (0, jsx_runtime_1.jsx)(IconWeather_, Object.assign({}, IconProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Weather', theme) && [
'amaui-Weather-icon',
'amaui-Weather-icon-weather'
],
IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
classes.icon_weather,
classes[`icon_weather_${values.weather === 'partly clear' ? 'cloudy' : values.weather}`],
classes[`icon_arrangement_${useDayTime ? 'pair' : 'regular'}`]
]) })) }, values.weather) }))] })));
});
Weather.displayName = 'amaui-Weather';
exports.default = Weather;