@onesy/ui-react
Version:
UI for React
338 lines (337 loc) • 14.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialCircleW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCircleW100Filled"));
var _IconMaterialNightlightW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNightlightW100Filled"));
var _IconMaterialCloudW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudW100Filled"));
var _IconMaterialRainyW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialRainyW100Filled"));
var _IconMaterialCloudySnowingW100Filled = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudySnowingW100Filled"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Type = _interopRequireDefault(require("../Type"));
var _Fade = _interopRequireDefault(require("../Fade"));
var _Transitions = _interopRequireDefault(require("../Transitions"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["tonal", "color", "style"],
_excluded2 = ["ref", "tonal", "color", "version", "size", "shadow", "dayTime", "weather", "temperature", "values", "interval", "IconDay", "IconNight", "IconCloud", "IconRain", "IconSnow", "IconProps", "Component", "className", "style"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const IconWeather = props => {
var _theme$elements;
const $ = (0, _compilerRuntime.c)(13);
const theme = (0, _styleReact.useOnesyTheme)();
const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
let color_;
let other;
let style;
let tonal;
if ($[0] !== props) {
var _props = props;
({
tonal,
color: color_,
style
} = _props);
other = (0, _objectWithoutProperties2.default)(_props, _excluded);
_props;
$[0] = props;
$[1] = color_;
$[2] = other;
$[3] = style;
$[4] = tonal;
} else {
color_ = $[1];
other = $[2];
style = $[3];
tonal = $[4];
}
let t0;
if ($[5] !== other || $[6] !== style) {
t0 = t1 => {
const {
color,
backgroundColor
} = t1;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({
viewBox: "0 0 177 178",
xmlns: "http://www.w3.org/2000/svg"
}, other), {}, {
style: _objectSpread(_objectSpread({}, style), {}, {
color,
fill: backgroundColor
}),
children: /*#__PURE__*/(0, _jsxRuntime.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"
})
}));
};
$[5] = other;
$[6] = style;
$[7] = t0;
} else {
t0 = $[7];
}
let t1;
if ($[8] !== Surface || $[9] !== color_ || $[10] !== t0 || $[11] !== tonal) {
t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
tonal: tonal,
color: color_,
children: t0
});
$[8] = Surface;
$[9] = color_;
$[10] = t0;
$[11] = tonal;
$[12] = t1;
} else {
t1 = $[12];
}
return t1;
};
const useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative',
aspectRatio: '1',
width: '100vw',
'&.onesy-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: {
'&.onesy-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: {
'&.onesy-Icon-root': {
position: 'absolute',
zIndex: '1',
bottom: '21%',
width: '40% !important',
height: 'auto',
left: '13%'
}
},
icon_dayTime_day: {
'&.onesy-Icon-root': {
color: '#fcc21d'
}
},
icon_dayTime_night: {
'&.onesy-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: {
'&.onesy-Icon-root': {
color: '#f1f3f4'
}
},
icon_weather_rainy: {
'&.onesy-Icon-root': {
color: '#e6f5fc'
}
},
icon_weather_snowy: {
'&.onesy-Icon-root': {
color: '#dcf0ff'
}
},
size_small: {
maxWidth: '120px'
},
size_regular: {
maxWidth: '180px'
},
size_large: {
maxWidth: '240px'
}
}), {
name: 'onesy-Weather'
});
const Weather = props_ => {
var _theme$ui, _theme$ui2, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyWeather) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
const Fade = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Fade) || _Fade.default;
const Transitions = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Transitions) || _Transitions.default;
const {
ref,
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.default,
IconNight = _IconMaterialNightlightW100Filled.default,
IconCloud = _IconMaterialCloudW100Filled.default,
IconRain = _IconMaterialRainyW100Filled.default,
IconSnow = _IconMaterialCloudySnowingW100Filled.default,
IconProps: IconProps_,
Component = 'div',
className,
style
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded2);
const {
classes
} = useStyle();
const [rect, setRect] = _react.default.useState();
const [values, setValues] = _react.default.useState(values_ !== undefined ? values_ : {
dayTime: dayTime_ !== undefined ? dayTime_ : 'day',
weather: weather_ !== undefined ? weather_ : 'clear',
temperature: temperature_ !== undefined ? temperature_ : '14'
});
const refs = {
root: _react.default.useRef(undefined),
values: _react.default.useRef(undefined)
};
refs.values.current = values;
const styles = {
root: {}
};
_react.default.useEffect(() => {
const method = () => {
var _refs$root$current;
return setRect((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.getBoundingClientRect());
};
const observer = new ResizeObserver(method);
method();
observer.observe(refs.root.current);
return () => {
observer.disconnect();
};
}, []);
_react.default.useEffect(() => {
if (values_ !== undefined && values_ !== refs.values.current) setValues(values_);
}, [values_]);
_react.default.useEffect(() => {
if (dayTime_ !== undefined && dayTime_ !== refs.values.current.dayTime) setValues(values__ => _objectSpread(_objectSpread({}, values__), {}, {
dayTime: dayTime_
}));
}, [dayTime_]);
_react.default.useEffect(() => {
if (weather_ !== undefined && weather_ !== refs.values.current.weather) setValues(values___0 => _objectSpread(_objectSpread({}, values___0), {}, {
weather: weather_
}));
}, [weather_]);
_react.default.useEffect(() => {
if (temperature_ !== undefined && temperature_ !== refs.values.current.temperature) setValues(values___1 => _objectSpread(_objectSpread({}, values___1), {}, {
temperature: temperature_
}));
}, [temperature_]);
if (!['small', 'regular', 'large'].includes(size)) styles.root.maxWidth = size;
const IconProps = _objectSpread({
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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
tonal: tonal,
color: color,
version: version,
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-root', `onesy-Weather-version-${version}`, `onesy-Weather-size-${size}`], className, classes.root, classes[`size_${size}`]]),
style: _objectSpread(_objectSpread({}, styles.root), style)
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconWeather, {
tonal: tonal,
color: color,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-icon-background'], classes.icon_background, shadow && classes.icon_background_shadow])
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
in: values.temperature !== undefined,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: "d1",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-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, "\xB0"]
})
}), useDayTime && /*#__PURE__*/(0, _jsxRuntime.jsx)(Transitions, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDayTime, _objectSpread(_objectSpread({}, IconProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-icon', 'onesy-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 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Transitions, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Fade, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconWeather_, _objectSpread(_objectSpread({}, IconProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Weather', theme) && ['onesy-Weather-icon', 'onesy-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 = 'onesy-Weather';
var _default = exports.default = Weather;