{counter}
\r\n * }\r\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","function _setPrototypeOf(t, e) {\n return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {\n return t.__proto__ = e, t;\n }, _setPrototypeOf(t, e);\n}\nexport { _setPrototypeOf as default };","import setPrototypeOf from \"./setPrototypeOf.js\";\nfunction _inheritsLoose(t, o) {\n t.prototype = Object.create(o.prototype), t.prototype.constructor = t, setPrototypeOf(t, o);\n}\nexport { _inheritsLoose as default };","function isAbsolute(pathname) {\n return pathname.charAt(0) === '/';\n}\n\n// About 1.5x faster than the two-arg version of Array#splice()\nfunction spliceOne(list, index) {\n for (var i = index, k = i + 1, n = list.length; k < n; i += 1, k += 1) {\n list[i] = list[k];\n }\n\n list.pop();\n}\n\n// This implementation is based heavily on node's url.parse\nfunction resolvePathname(to, from) {\n if (from === undefined) from = '';\n\n var toParts = (to && to.split('/')) || [];\n var fromParts = (from && from.split('/')) || [];\n\n var isToAbs = to && isAbsolute(to);\n var isFromAbs = from && isAbsolute(from);\n var mustEndAbs = isToAbs || isFromAbs;\n\n if (to && isAbsolute(to)) {\n // to is absolute\n fromParts = toParts;\n } else if (toParts.length) {\n // to is relative, drop the filename\n fromParts.pop();\n fromParts = fromParts.concat(toParts);\n }\n\n if (!fromParts.length) return '/';\n\n var hasTrailingSlash;\n if (fromParts.length) {\n var last = fromParts[fromParts.length - 1];\n hasTrailingSlash = last === '.' || last === '..' || last === '';\n } else {\n hasTrailingSlash = false;\n }\n\n var up = 0;\n for (var i = fromParts.length; i >= 0; i--) {\n var part = fromParts[i];\n\n if (part === '.') {\n spliceOne(fromParts, i);\n } else if (part === '..') {\n spliceOne(fromParts, i);\n up++;\n } else if (up) {\n spliceOne(fromParts, i);\n up--;\n }\n }\n\n if (!mustEndAbs) for (; up--; up) fromParts.unshift('..');\n\n if (\n mustEndAbs &&\n fromParts[0] !== '' &&\n (!fromParts[0] || !isAbsolute(fromParts[0]))\n )\n fromParts.unshift('');\n\n var result = fromParts.join('/');\n\n if (hasTrailingSlash && result.substr(-1) !== '/') result += '/';\n\n return result;\n}\n\nexport default resolvePathname;\n","export * from './exports';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport { setBatch } from './utils/batch'; // Enable batched updates in our subscriptions for use\n// with standard React renderers (ReactDOM, React Native)\n\nsetBatch(batch);\nexport { batch };","var isProduction = process.env.NODE_ENV === 'production';\nvar prefix = 'Invariant failed';\nfunction invariant(condition, message) {\n if (condition) {\n return;\n }\n if (isProduction) {\n throw new Error(prefix);\n }\n var provided = typeof message === 'function' ? message() : message;\n var value = provided ? \"\".concat(prefix, \": \").concat(provided) : prefix;\n throw new Error(value);\n}\n\nexport { invariant as default };\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport resolvePathname from 'resolve-pathname';\nimport valueEqual from 'value-equal';\nimport warning from 'tiny-warning';\nimport invariant from 'tiny-invariant';\n\nfunction addLeadingSlash(path) {\n return path.charAt(0) === '/' ? path : '/' + path;\n}\nfunction stripLeadingSlash(path) {\n return path.charAt(0) === '/' ? path.substr(1) : path;\n}\nfunction hasBasename(path, prefix) {\n return path.toLowerCase().indexOf(prefix.toLowerCase()) === 0 && '/?#'.indexOf(path.charAt(prefix.length)) !== -1;\n}\nfunction stripBasename(path, prefix) {\n return hasBasename(path, prefix) ? path.substr(prefix.length) : path;\n}\nfunction stripTrailingSlash(path) {\n return path.charAt(path.length - 1) === '/' ? path.slice(0, -1) : path;\n}\nfunction parsePath(path) {\n var pathname = path || '/';\n var search = '';\n var hash = '';\n var hashIndex = pathname.indexOf('#');\n\n if (hashIndex !== -1) {\n hash = pathname.substr(hashIndex);\n pathname = pathname.substr(0, hashIndex);\n }\n\n var searchIndex = pathname.indexOf('?');\n\n if (searchIndex !== -1) {\n search = pathname.substr(searchIndex);\n pathname = pathname.substr(0, searchIndex);\n }\n\n return {\n pathname: pathname,\n search: search === '?' ? '' : search,\n hash: hash === '#' ? '' : hash\n };\n}\nfunction createPath(location) {\n var pathname = location.pathname,\n search = location.search,\n hash = location.hash;\n var path = pathname || '/';\n if (search && search !== '?') path += search.charAt(0) === '?' ? search : \"?\" + search;\n if (hash && hash !== '#') path += hash.charAt(0) === '#' ? hash : \"#\" + hash;\n return path;\n}\n\nfunction createLocation(path, state, key, currentLocation) {\n var location;\n\n if (typeof path === 'string') {\n // Two-arg form: push(path, state)\n location = parsePath(path);\n location.state = state;\n } else {\n // One-arg form: push(location)\n location = _extends({}, path);\n if (location.pathname === undefined) location.pathname = '';\n\n if (location.search) {\n if (location.search.charAt(0) !== '?') location.search = '?' + location.search;\n } else {\n location.search = '';\n }\n\n if (location.hash) {\n if (location.hash.charAt(0) !== '#') location.hash = '#' + location.hash;\n } else {\n location.hash = '';\n }\n\n if (state !== undefined && location.state === undefined) location.state = state;\n }\n\n try {\n location.pathname = decodeURI(location.pathname);\n } catch (e) {\n if (e instanceof URIError) {\n throw new URIError('Pathname \"' + location.pathname + '\" could not be decoded. ' + 'This is likely caused by an invalid percent-encoding.');\n } else {\n throw e;\n }\n }\n\n if (key) location.key = key;\n\n if (currentLocation) {\n // Resolve incomplete/relative pathname relative to current location.\n if (!location.pathname) {\n location.pathname = currentLocation.pathname;\n } else if (location.pathname.charAt(0) !== '/') {\n location.pathname = resolvePathname(location.pathname, currentLocation.pathname);\n }\n } else {\n // When there is no prior location and pathname is empty, set it to /\n if (!location.pathname) {\n location.pathname = '/';\n }\n }\n\n return location;\n}\nfunction locationsAreEqual(a, b) {\n return a.pathname === b.pathname && a.search === b.search && a.hash === b.hash && a.key === b.key && valueEqual(a.state, b.state);\n}\n\nfunction createTransitionManager() {\n var prompt = null;\n\n function setPrompt(nextPrompt) {\n process.env.NODE_ENV !== \"production\" ? warning(prompt == null, 'A history supports only one prompt at a time') : void 0;\n prompt = nextPrompt;\n return function () {\n if (prompt === nextPrompt) prompt = null;\n };\n }\n\n function confirmTransitionTo(location, action, getUserConfirmation, callback) {\n // TODO: If another transition starts while we're still confirming\n // the previous one, we may end up in a weird state. Figure out the\n // best way to handle this.\n if (prompt != null) {\n var result = typeof prompt === 'function' ? prompt(location, action) : prompt;\n\n if (typeof result === 'string') {\n if (typeof getUserConfirmation === 'function') {\n getUserConfirmation(result, callback);\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(false, 'A history needs a getUserConfirmation function in order to use a prompt message') : void 0;\n callback(true);\n }\n } else {\n // Return false from a transition hook to cancel the transition.\n callback(result !== false);\n }\n } else {\n callback(true);\n }\n }\n\n var listeners = [];\n\n function appendListener(fn) {\n var isActive = true;\n\n function listener() {\n if (isActive) fn.apply(void 0, arguments);\n }\n\n listeners.push(listener);\n return function () {\n isActive = false;\n listeners = listeners.filter(function (item) {\n return item !== listener;\n });\n };\n }\n\n function notifyListeners() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n listeners.forEach(function (listener) {\n return listener.apply(void 0, args);\n });\n }\n\n return {\n setPrompt: setPrompt,\n confirmTransitionTo: confirmTransitionTo,\n appendListener: appendListener,\n notifyListeners: notifyListeners\n };\n}\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\nfunction getConfirmation(message, callback) {\n callback(window.confirm(message)); // eslint-disable-line no-alert\n}\n/**\n * Returns true if the HTML5 history API is supported. Taken from Modernizr.\n *\n * https://github.com/Modernizr/Modernizr/blob/master/LICENSE\n * https://github.com/Modernizr/Modernizr/blob/master/feature-detects/history.js\n * changed to avoid false negatives for Windows Phones: https://github.com/reactjs/react-router/issues/586\n */\n\nfunction supportsHistory() {\n var ua = window.navigator.userAgent;\n if ((ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) && ua.indexOf('Mobile Safari') !== -1 && ua.indexOf('Chrome') === -1 && ua.indexOf('Windows Phone') === -1) return false;\n return window.history && 'pushState' in window.history;\n}\n/**\n * Returns true if browser fires popstate on hash change.\n * IE10 and IE11 do not.\n */\n\nfunction supportsPopStateOnHashChange() {\n return window.navigator.userAgent.indexOf('Trident') === -1;\n}\n/**\n * Returns false if using go(n) with hash history causes a full page reload.\n */\n\nfunction supportsGoWithoutReloadUsingHash() {\n return window.navigator.userAgent.indexOf('Firefox') === -1;\n}\n/**\n * Returns true if a given popstate event is an extraneous WebKit event.\n * Accounts for the fact that Chrome on iOS fires real popstate events\n * containing undefined state when pressing the back button.\n */\n\nfunction isExtraneousPopstateEvent(event) {\n return event.state === undefined && navigator.userAgent.indexOf('CriOS') === -1;\n}\n\nvar PopStateEvent = 'popstate';\nvar HashChangeEvent = 'hashchange';\n\nfunction getHistoryState() {\n try {\n return window.history.state || {};\n } catch (e) {\n // IE 11 sometimes throws when accessing window.history.state\n // See https://github.com/ReactTraining/history/pull/289\n return {};\n }\n}\n/**\n * Creates a history object that uses the HTML5 history API including\n * pushState, replaceState, and the popstate event.\n */\n\n\nfunction createBrowserHistory(props) {\n if (props === void 0) {\n props = {};\n }\n\n !canUseDOM ? process.env.NODE_ENV !== \"production\" ? invariant(false, 'Browser history needs a DOM') : invariant(false) : void 0;\n var globalHistory = window.history;\n var canUseHistory = supportsHistory();\n var needsHashChangeListener = !supportsPopStateOnHashChange();\n var _props = props,\n _props$forceRefresh = _props.forceRefresh,\n forceRefresh = _props$forceRefresh === void 0 ? false : _props$forceRefresh,\n _props$getUserConfirm = _props.getUserConfirmation,\n getUserConfirmation = _props$getUserConfirm === void 0 ? getConfirmation : _props$getUserConfirm,\n _props$keyLength = _props.keyLength,\n keyLength = _props$keyLength === void 0 ? 6 : _props$keyLength;\n var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';\n\n function getDOMLocation(historyState) {\n var _ref = historyState || {},\n key = _ref.key,\n state = _ref.state;\n\n var _window$location = window.location,\n pathname = _window$location.pathname,\n search = _window$location.search,\n hash = _window$location.hash;\n var path = pathname + search + hash;\n process.env.NODE_ENV !== \"production\" ? warning(!basename || hasBasename(path, basename), 'You are attempting to use a basename on a page whose URL path does not begin ' + 'with the basename. Expected path \"' + path + '\" to begin with \"' + basename + '\".') : void 0;\n if (basename) path = stripBasename(path, basename);\n return createLocation(path, state, key);\n }\n\n function createKey() {\n return Math.random().toString(36).substr(2, keyLength);\n }\n\n var transitionManager = createTransitionManager();\n\n function setState(nextState) {\n _extends(history, nextState);\n\n history.length = globalHistory.length;\n transitionManager.notifyListeners(history.location, history.action);\n }\n\n function handlePopState(event) {\n // Ignore extraneous popstate events in WebKit.\n if (isExtraneousPopstateEvent(event)) return;\n handlePop(getDOMLocation(event.state));\n }\n\n function handleHashChange() {\n handlePop(getDOMLocation(getHistoryState()));\n }\n\n var forceNextPop = false;\n\n function handlePop(location) {\n if (forceNextPop) {\n forceNextPop = false;\n setState();\n } else {\n var action = 'POP';\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (ok) {\n setState({\n action: action,\n location: location\n });\n } else {\n revertPop(location);\n }\n });\n }\n }\n\n function revertPop(fromLocation) {\n var toLocation = history.location; // TODO: We could probably make this more reliable by\n // keeping a list of keys we've seen in sessionStorage.\n // Instead, we just default to 0 for keys we don't know.\n\n var toIndex = allKeys.indexOf(toLocation.key);\n if (toIndex === -1) toIndex = 0;\n var fromIndex = allKeys.indexOf(fromLocation.key);\n if (fromIndex === -1) fromIndex = 0;\n var delta = toIndex - fromIndex;\n\n if (delta) {\n forceNextPop = true;\n go(delta);\n }\n }\n\n var initialLocation = getDOMLocation(getHistoryState());\n var allKeys = [initialLocation.key]; // Public interface\n\n function createHref(location) {\n return basename + createPath(location);\n }\n\n function push(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to push when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'PUSH';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var href = createHref(location);\n var key = location.key,\n state = location.state;\n\n if (canUseHistory) {\n globalHistory.pushState({\n key: key,\n state: state\n }, null, href);\n\n if (forceRefresh) {\n window.location.href = href;\n } else {\n var prevIndex = allKeys.indexOf(history.location.key);\n var nextKeys = allKeys.slice(0, prevIndex + 1);\n nextKeys.push(location.key);\n allKeys = nextKeys;\n setState({\n action: action,\n location: location\n });\n }\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Browser history cannot push state in browsers that do not support HTML5 history') : void 0;\n window.location.href = href;\n }\n });\n }\n\n function replace(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to replace when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'REPLACE';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var href = createHref(location);\n var key = location.key,\n state = location.state;\n\n if (canUseHistory) {\n globalHistory.replaceState({\n key: key,\n state: state\n }, null, href);\n\n if (forceRefresh) {\n window.location.replace(href);\n } else {\n var prevIndex = allKeys.indexOf(history.location.key);\n if (prevIndex !== -1) allKeys[prevIndex] = location.key;\n setState({\n action: action,\n location: location\n });\n }\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Browser history cannot replace state in browsers that do not support HTML5 history') : void 0;\n window.location.replace(href);\n }\n });\n }\n\n function go(n) {\n globalHistory.go(n);\n }\n\n function goBack() {\n go(-1);\n }\n\n function goForward() {\n go(1);\n }\n\n var listenerCount = 0;\n\n function checkDOMListeners(delta) {\n listenerCount += delta;\n\n if (listenerCount === 1 && delta === 1) {\n window.addEventListener(PopStateEvent, handlePopState);\n if (needsHashChangeListener) window.addEventListener(HashChangeEvent, handleHashChange);\n } else if (listenerCount === 0) {\n window.removeEventListener(PopStateEvent, handlePopState);\n if (needsHashChangeListener) window.removeEventListener(HashChangeEvent, handleHashChange);\n }\n }\n\n var isBlocked = false;\n\n function block(prompt) {\n if (prompt === void 0) {\n prompt = false;\n }\n\n var unblock = transitionManager.setPrompt(prompt);\n\n if (!isBlocked) {\n checkDOMListeners(1);\n isBlocked = true;\n }\n\n return function () {\n if (isBlocked) {\n isBlocked = false;\n checkDOMListeners(-1);\n }\n\n return unblock();\n };\n }\n\n function listen(listener) {\n var unlisten = transitionManager.appendListener(listener);\n checkDOMListeners(1);\n return function () {\n checkDOMListeners(-1);\n unlisten();\n };\n }\n\n var history = {\n length: globalHistory.length,\n action: 'POP',\n location: initialLocation,\n createHref: createHref,\n push: push,\n replace: replace,\n go: go,\n goBack: goBack,\n goForward: goForward,\n block: block,\n listen: listen\n };\n return history;\n}\n\nvar HashChangeEvent$1 = 'hashchange';\nvar HashPathCoders = {\n hashbang: {\n encodePath: function encodePath(path) {\n return path.charAt(0) === '!' ? path : '!/' + stripLeadingSlash(path);\n },\n decodePath: function decodePath(path) {\n return path.charAt(0) === '!' ? path.substr(1) : path;\n }\n },\n noslash: {\n encodePath: stripLeadingSlash,\n decodePath: addLeadingSlash\n },\n slash: {\n encodePath: addLeadingSlash,\n decodePath: addLeadingSlash\n }\n};\n\nfunction stripHash(url) {\n var hashIndex = url.indexOf('#');\n return hashIndex === -1 ? url : url.slice(0, hashIndex);\n}\n\nfunction getHashPath() {\n // We can't use window.location.hash here because it's not\n // consistent across browsers - Firefox will pre-decode it!\n var href = window.location.href;\n var hashIndex = href.indexOf('#');\n return hashIndex === -1 ? '' : href.substring(hashIndex + 1);\n}\n\nfunction pushHashPath(path) {\n window.location.hash = path;\n}\n\nfunction replaceHashPath(path) {\n window.location.replace(stripHash(window.location.href) + '#' + path);\n}\n\nfunction createHashHistory(props) {\n if (props === void 0) {\n props = {};\n }\n\n !canUseDOM ? process.env.NODE_ENV !== \"production\" ? invariant(false, 'Hash history needs a DOM') : invariant(false) : void 0;\n var globalHistory = window.history;\n var canGoWithoutReload = supportsGoWithoutReloadUsingHash();\n var _props = props,\n _props$getUserConfirm = _props.getUserConfirmation,\n getUserConfirmation = _props$getUserConfirm === void 0 ? getConfirmation : _props$getUserConfirm,\n _props$hashType = _props.hashType,\n hashType = _props$hashType === void 0 ? 'slash' : _props$hashType;\n var basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';\n var _HashPathCoders$hashT = HashPathCoders[hashType],\n encodePath = _HashPathCoders$hashT.encodePath,\n decodePath = _HashPathCoders$hashT.decodePath;\n\n function getDOMLocation() {\n var path = decodePath(getHashPath());\n process.env.NODE_ENV !== \"production\" ? warning(!basename || hasBasename(path, basename), 'You are attempting to use a basename on a page whose URL path does not begin ' + 'with the basename. Expected path \"' + path + '\" to begin with \"' + basename + '\".') : void 0;\n if (basename) path = stripBasename(path, basename);\n return createLocation(path);\n }\n\n var transitionManager = createTransitionManager();\n\n function setState(nextState) {\n _extends(history, nextState);\n\n history.length = globalHistory.length;\n transitionManager.notifyListeners(history.location, history.action);\n }\n\n var forceNextPop = false;\n var ignorePath = null;\n\n function locationsAreEqual$$1(a, b) {\n return a.pathname === b.pathname && a.search === b.search && a.hash === b.hash;\n }\n\n function handleHashChange() {\n var path = getHashPath();\n var encodedPath = encodePath(path);\n\n if (path !== encodedPath) {\n // Ensure we always have a properly-encoded hash.\n replaceHashPath(encodedPath);\n } else {\n var location = getDOMLocation();\n var prevLocation = history.location;\n if (!forceNextPop && locationsAreEqual$$1(prevLocation, location)) return; // A hashchange doesn't always == location change.\n\n if (ignorePath === createPath(location)) return; // Ignore this change; we already setState in push/replace.\n\n ignorePath = null;\n handlePop(location);\n }\n }\n\n function handlePop(location) {\n if (forceNextPop) {\n forceNextPop = false;\n setState();\n } else {\n var action = 'POP';\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (ok) {\n setState({\n action: action,\n location: location\n });\n } else {\n revertPop(location);\n }\n });\n }\n }\n\n function revertPop(fromLocation) {\n var toLocation = history.location; // TODO: We could probably make this more reliable by\n // keeping a list of paths we've seen in sessionStorage.\n // Instead, we just default to 0 for paths we don't know.\n\n var toIndex = allPaths.lastIndexOf(createPath(toLocation));\n if (toIndex === -1) toIndex = 0;\n var fromIndex = allPaths.lastIndexOf(createPath(fromLocation));\n if (fromIndex === -1) fromIndex = 0;\n var delta = toIndex - fromIndex;\n\n if (delta) {\n forceNextPop = true;\n go(delta);\n }\n } // Ensure the hash is encoded properly before doing anything else.\n\n\n var path = getHashPath();\n var encodedPath = encodePath(path);\n if (path !== encodedPath) replaceHashPath(encodedPath);\n var initialLocation = getDOMLocation();\n var allPaths = [createPath(initialLocation)]; // Public interface\n\n function createHref(location) {\n var baseTag = document.querySelector('base');\n var href = '';\n\n if (baseTag && baseTag.getAttribute('href')) {\n href = stripHash(window.location.href);\n }\n\n return href + '#' + encodePath(basename + createPath(location));\n }\n\n function push(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Hash history cannot push state; it is ignored') : void 0;\n var action = 'PUSH';\n var location = createLocation(path, undefined, undefined, history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var path = createPath(location);\n var encodedPath = encodePath(basename + path);\n var hashChanged = getHashPath() !== encodedPath;\n\n if (hashChanged) {\n // We cannot tell if a hashchange was caused by a PUSH, so we'd\n // rather setState here and ignore the hashchange. The caveat here\n // is that other hash histories in the page will consider it a POP.\n ignorePath = path;\n pushHashPath(encodedPath);\n var prevIndex = allPaths.lastIndexOf(createPath(history.location));\n var nextPaths = allPaths.slice(0, prevIndex + 1);\n nextPaths.push(path);\n allPaths = nextPaths;\n setState({\n action: action,\n location: location\n });\n } else {\n process.env.NODE_ENV !== \"production\" ? warning(false, 'Hash history cannot PUSH the same path; a new entry will not be added to the history stack') : void 0;\n setState();\n }\n });\n }\n\n function replace(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(state === undefined, 'Hash history cannot replace state; it is ignored') : void 0;\n var action = 'REPLACE';\n var location = createLocation(path, undefined, undefined, history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var path = createPath(location);\n var encodedPath = encodePath(basename + path);\n var hashChanged = getHashPath() !== encodedPath;\n\n if (hashChanged) {\n // We cannot tell if a hashchange was caused by a REPLACE, so we'd\n // rather setState here and ignore the hashchange. The caveat here\n // is that other hash histories in the page will consider it a POP.\n ignorePath = path;\n replaceHashPath(encodedPath);\n }\n\n var prevIndex = allPaths.indexOf(createPath(history.location));\n if (prevIndex !== -1) allPaths[prevIndex] = path;\n setState({\n action: action,\n location: location\n });\n });\n }\n\n function go(n) {\n process.env.NODE_ENV !== \"production\" ? warning(canGoWithoutReload, 'Hash history go(n) causes a full page reload in this browser') : void 0;\n globalHistory.go(n);\n }\n\n function goBack() {\n go(-1);\n }\n\n function goForward() {\n go(1);\n }\n\n var listenerCount = 0;\n\n function checkDOMListeners(delta) {\n listenerCount += delta;\n\n if (listenerCount === 1 && delta === 1) {\n window.addEventListener(HashChangeEvent$1, handleHashChange);\n } else if (listenerCount === 0) {\n window.removeEventListener(HashChangeEvent$1, handleHashChange);\n }\n }\n\n var isBlocked = false;\n\n function block(prompt) {\n if (prompt === void 0) {\n prompt = false;\n }\n\n var unblock = transitionManager.setPrompt(prompt);\n\n if (!isBlocked) {\n checkDOMListeners(1);\n isBlocked = true;\n }\n\n return function () {\n if (isBlocked) {\n isBlocked = false;\n checkDOMListeners(-1);\n }\n\n return unblock();\n };\n }\n\n function listen(listener) {\n var unlisten = transitionManager.appendListener(listener);\n checkDOMListeners(1);\n return function () {\n checkDOMListeners(-1);\n unlisten();\n };\n }\n\n var history = {\n length: globalHistory.length,\n action: 'POP',\n location: initialLocation,\n createHref: createHref,\n push: push,\n replace: replace,\n go: go,\n goBack: goBack,\n goForward: goForward,\n block: block,\n listen: listen\n };\n return history;\n}\n\nfunction clamp(n, lowerBound, upperBound) {\n return Math.min(Math.max(n, lowerBound), upperBound);\n}\n/**\n * Creates a history object that stores locations in memory.\n */\n\n\nfunction createMemoryHistory(props) {\n if (props === void 0) {\n props = {};\n }\n\n var _props = props,\n getUserConfirmation = _props.getUserConfirmation,\n _props$initialEntries = _props.initialEntries,\n initialEntries = _props$initialEntries === void 0 ? ['/'] : _props$initialEntries,\n _props$initialIndex = _props.initialIndex,\n initialIndex = _props$initialIndex === void 0 ? 0 : _props$initialIndex,\n _props$keyLength = _props.keyLength,\n keyLength = _props$keyLength === void 0 ? 6 : _props$keyLength;\n var transitionManager = createTransitionManager();\n\n function setState(nextState) {\n _extends(history, nextState);\n\n history.length = history.entries.length;\n transitionManager.notifyListeners(history.location, history.action);\n }\n\n function createKey() {\n return Math.random().toString(36).substr(2, keyLength);\n }\n\n var index = clamp(initialIndex, 0, initialEntries.length - 1);\n var entries = initialEntries.map(function (entry) {\n return typeof entry === 'string' ? createLocation(entry, undefined, createKey()) : createLocation(entry, undefined, entry.key || createKey());\n }); // Public interface\n\n var createHref = createPath;\n\n function push(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to push when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'PUSH';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n var prevIndex = history.index;\n var nextIndex = prevIndex + 1;\n var nextEntries = history.entries.slice(0);\n\n if (nextEntries.length > nextIndex) {\n nextEntries.splice(nextIndex, nextEntries.length - nextIndex, location);\n } else {\n nextEntries.push(location);\n }\n\n setState({\n action: action,\n location: location,\n index: nextIndex,\n entries: nextEntries\n });\n });\n }\n\n function replace(path, state) {\n process.env.NODE_ENV !== \"production\" ? warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to replace when the 1st ' + 'argument is a location-like object that already has state; it is ignored') : void 0;\n var action = 'REPLACE';\n var location = createLocation(path, state, createKey(), history.location);\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (!ok) return;\n history.entries[history.index] = location;\n setState({\n action: action,\n location: location\n });\n });\n }\n\n function go(n) {\n var nextIndex = clamp(history.index + n, 0, history.entries.length - 1);\n var action = 'POP';\n var location = history.entries[nextIndex];\n transitionManager.confirmTransitionTo(location, action, getUserConfirmation, function (ok) {\n if (ok) {\n setState({\n action: action,\n location: location,\n index: nextIndex\n });\n } else {\n // Mimic the behavior of DOM histories by\n // causing a render after a cancelled POP.\n setState();\n }\n });\n }\n\n function goBack() {\n go(-1);\n }\n\n function goForward() {\n go(1);\n }\n\n function canGo(n) {\n var nextIndex = history.index + n;\n return nextIndex >= 0 && nextIndex < history.entries.length;\n }\n\n function block(prompt) {\n if (prompt === void 0) {\n prompt = false;\n }\n\n return transitionManager.setPrompt(prompt);\n }\n\n function listen(listener) {\n return transitionManager.appendListener(listener);\n }\n\n var history = {\n length: entries.length,\n action: 'POP',\n location: entries[index],\n index: index,\n entries: entries,\n createHref: createHref,\n push: push,\n replace: replace,\n go: go,\n goBack: goBack,\n goForward: goForward,\n canGo: canGo,\n block: block,\n listen: listen\n };\n return history;\n}\n\nexport { createBrowserHistory, createHashHistory, createMemoryHistory, createLocation, locationsAreEqual, parsePath, createPath };\n","// MIT License\n// Copyright (c) 2019-present StringEpsilon \n {\n rndID()\n }}\n className={`${(pathname === \"/about-brand\" || pathname === \"/\")? \"Active\" : \"\"}`}>\n
\n \n \n ABOUT BRAND\n \n
\n \n \n 关于品牌\n \n
\n \n
\n \n \n BESPOKE PROCESS\n \n
\n \n \n 定制流程\n \n
\n \n
\n \n \n PRODUCTS\n \n
\n \n \n 产品介绍\n \n
\n \n
\n \n \n COLLECTIONS\n \n
\n \n \n 样衣展示\n \n
\n \n
\n \n \n OUR CLIENTS\n \n
\n \n \n 明星案例\n \n
\n \n
\n \n}\n\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n rndID: ()=>dispatch(rndID()),\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Footer);\n\n","import React from \"react\"\nimport \"./TopBanner.css\"\nimport {mouseEnter, mouseLeave} from \"../actions/app\";\nimport {connect} from \"react-redux\";\n\nfunction TopBanner({mouseEnter, mouseLeave}) {\n const date=new Date();\n return \n \n CONTACT US\n \n
\n \n \n 联系我们\n \n
\n \n
\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n openTopMenus: state.app.openTopMenus,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(TopBanner);\n\n\n","import React from \"react\"\n\nexport default function ({children}) {\n return \n COPYRIGHT ©️ 2014-{date.getFullYear()} 北京唯臻商贸有限公司 京ICP备16038627号\n {/*MR. DANDY 高级定制*/}\n \n
\n {children}
\n}","/**\n * SSR Window 3.0.0\n * Better handling for window object in SSR environment\n * https://github.com/nolimits4web/ssr-window\n *\n * Copyright 2020, Vladimir Kharlampidi\n *\n * Licensed under MIT\n *\n * Released on: November 9, 2020\n */\n/* eslint-disable no-param-reassign */\nfunction isObject(obj) {\n return (obj !== null &&\n typeof obj === 'object' &&\n 'constructor' in obj &&\n obj.constructor === Object);\n}\nfunction extend(target, src) {\n if (target === void 0) { target = {}; }\n if (src === void 0) { src = {}; }\n Object.keys(src).forEach(function (key) {\n if (typeof target[key] === 'undefined')\n target[key] = src[key];\n else if (isObject(src[key]) &&\n isObject(target[key]) &&\n Object.keys(src[key]).length > 0) {\n extend(target[key], src[key]);\n }\n });\n}\n\nvar ssrDocument = {\n body: {},\n addEventListener: function () { },\n removeEventListener: function () { },\n activeElement: {\n blur: function () { },\n nodeName: '',\n },\n querySelector: function () {\n return null;\n },\n querySelectorAll: function () {\n return [];\n },\n getElementById: function () {\n return null;\n },\n createEvent: function () {\n return {\n initEvent: function () { },\n };\n },\n createElement: function () {\n return {\n children: [],\n childNodes: [],\n style: {},\n setAttribute: function () { },\n getElementsByTagName: function () {\n return [];\n },\n };\n },\n createElementNS: function () {\n return {};\n },\n importNode: function () {\n return null;\n },\n location: {\n hash: '',\n host: '',\n hostname: '',\n href: '',\n origin: '',\n pathname: '',\n protocol: '',\n search: '',\n },\n};\nfunction getDocument() {\n var doc = typeof document !== 'undefined' ? document : {};\n extend(doc, ssrDocument);\n return doc;\n}\n\nvar ssrWindow = {\n document: ssrDocument,\n navigator: {\n userAgent: '',\n },\n location: {\n hash: '',\n host: '',\n hostname: '',\n href: '',\n origin: '',\n pathname: '',\n protocol: '',\n search: '',\n },\n history: {\n replaceState: function () { },\n pushState: function () { },\n go: function () { },\n back: function () { },\n },\n CustomEvent: function CustomEvent() {\n return this;\n },\n addEventListener: function () { },\n removeEventListener: function () { },\n getComputedStyle: function () {\n return {\n getPropertyValue: function () {\n return '';\n },\n };\n },\n Image: function () { },\n Date: function () { },\n screen: {},\n setTimeout: function () { },\n clearTimeout: function () { },\n matchMedia: function () {\n return {};\n },\n requestAnimationFrame: function (callback) {\n if (typeof setTimeout === 'undefined') {\n callback();\n return null;\n }\n return setTimeout(callback, 0);\n },\n cancelAnimationFrame: function (id) {\n if (typeof setTimeout === 'undefined') {\n return;\n }\n clearTimeout(id);\n },\n};\nfunction getWindow() {\n var win = typeof window !== 'undefined' ? window : {};\n extend(win, ssrWindow);\n return win;\n}\n\nexport { extend, getDocument, getWindow, ssrDocument, ssrWindow };\n","/**\n * Dom7 3.0.0\n * Minimalistic JavaScript library for DOM manipulation, with a jQuery-compatible API\n * https://framework7.io/docs/dom7.html\n *\n * Copyright 2020, Vladimir Kharlampidi\n *\n * Licensed under MIT\n *\n * Released on: November 9, 2020\n */\nimport { getWindow, getDocument } from 'ssr-window';\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\n\nfunction _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nfunction _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nfunction _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (_isNativeReflectConstruct()) {\n _construct = Reflect.construct;\n } else {\n _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) _setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nfunction _isNativeFunction(fn) {\n return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n}\n\nfunction _wrapNativeSuper(Class) {\n var _cache = typeof Map === \"function\" ? new Map() : undefined;\n\n _wrapNativeSuper = function _wrapNativeSuper(Class) {\n if (Class === null || !_isNativeFunction(Class)) return Class;\n\n if (typeof Class !== \"function\") {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n\n if (typeof _cache !== \"undefined\") {\n if (_cache.has(Class)) return _cache.get(Class);\n\n _cache.set(Class, Wrapper);\n }\n\n function Wrapper() {\n return _construct(Class, arguments, _getPrototypeOf(this).constructor);\n }\n\n Wrapper.prototype = Object.create(Class.prototype, {\n constructor: {\n value: Wrapper,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n return _setPrototypeOf(Wrapper, Class);\n };\n\n return _wrapNativeSuper(Class);\n}\n\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\n/* eslint-disable no-proto */\nfunction makeReactive(obj) {\n var proto = obj.__proto__;\n Object.defineProperty(obj, '__proto__', {\n get: function get() {\n return proto;\n },\n set: function set(value) {\n proto.__proto__ = value;\n }\n });\n}\n\nvar Dom7 = /*#__PURE__*/function (_Array) {\n _inheritsLoose(Dom7, _Array);\n\n function Dom7(items) {\n var _this;\n\n _this = _Array.call.apply(_Array, [this].concat(items)) || this;\n makeReactive(_assertThisInitialized(_this));\n return _this;\n }\n\n return Dom7;\n}( /*#__PURE__*/_wrapNativeSuper(Array));\n\nfunction arrayFlat(arr) {\n if (arr === void 0) {\n arr = [];\n }\n\n var res = [];\n arr.forEach(function (el) {\n if (Array.isArray(el)) {\n res.push.apply(res, arrayFlat(el));\n } else {\n res.push(el);\n }\n });\n return res;\n}\nfunction arrayFilter(arr, callback) {\n return Array.prototype.filter.call(arr, callback);\n}\nfunction arrayUnique(arr) {\n var uniqueArray = [];\n\n for (var i = 0; i < arr.length; i += 1) {\n if (uniqueArray.indexOf(arr[i]) === -1) uniqueArray.push(arr[i]);\n }\n\n return uniqueArray;\n}\nfunction toCamelCase(string) {\n return string.toLowerCase().replace(/-(.)/g, function (match, group) {\n return group.toUpperCase();\n });\n}\n\nfunction qsa(selector, context) {\n if (typeof selector !== 'string') {\n return [selector];\n }\n\n var a = [];\n var res = context.querySelectorAll(selector);\n\n for (var i = 0; i < res.length; i += 1) {\n a.push(res[i]);\n }\n\n return a;\n}\n\nfunction $(selector, context) {\n var window = getWindow();\n var document = getDocument();\n var arr = [];\n\n if (!context && selector instanceof Dom7) {\n return selector;\n }\n\n if (!selector) {\n return new Dom7(arr);\n }\n\n if (typeof selector === 'string') {\n var html = selector.trim();\n\n if (html.indexOf('<') >= 0 && html.indexOf('>') >= 0) {\n var toCreate = 'div';\n if (html.indexOf('}\n {isDesktopOrLaptop && \n
\n![]({\"/home-detail.jpg\"}/)
\n {/*
\n }\n \n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n width: state.app.width,\n height: state.app.height,\n footerHeight: state.app.footerHeight,\n bannerHeight: state.app.bannerHeight,\n logoRatio: state.app.logoRatio,\n openTopMenus: state.app.openTopMenus,\n blackHeader: state.app.blackHeader,\n randID: state.app.randID,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n toggleTopMenus: () => dispatch(toggleTopMenus()),\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n setBlackHeader: (isBlack) => dispatch(setBlackHeader(isBlack))\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Home);\n","import React, {useRef, useState, useLayoutEffect, useEffect} from \"react\"\nimport {connect} from \"react-redux\";\nimport \"./BespokeProcess.css\"\nimport {mouseEnter, mouseLeave, setBlackHeader, toggleTopMenus} from \"../actions/app\";\nimport SnapStart from \"../components/SnapStart\";\nimport {useMediaQuery} from \"react-responsive\";\nimport {MobileBreakPoint} from \"../constants\";\nimport { Helmet } from 'react-helmet';\n\n\nfunction BespokeProcess({pathname, footerHeight, bannerHeight, logoRatio, width, height}) {\n const [layoutReady, setLayoutReady] = useState(false)\n const [scrollIntoView, setScrollIntoView] = useState(true)\n const ref = useRef(null)\n const isDesktopOrLaptop = useMediaQuery({\n query: `(min-width: ${MobileBreakPoint+1}px)`\n })\n const isTabletOrMobile = useMediaQuery({\n query: `(max-width: ${MobileBreakPoint}px)`\n })\n\n useLayoutEffect(() => {\n const timer = setTimeout(() => {\n setLayoutReady(true)\n }, 250)\n return () => {\n clearTimeout(timer)\n }\n }, [])\n\n return }\n {isDesktopOrLaptop && 1440.0/900?\"home-cover.jpg\":\"home-cover-2.jpg\"}')`,\n backgroundPosition: \"center center\",\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n }}\n className={\"CoverImage\"}\n />\n }\n {(isTabletOrMobile && window.location.pathname !== '/') && \n console.log('slide change')}\n // onSwiper={(swiper) => console.log(swiper)}\n >\n {slides && slides.map((slideContent, index) => (\n \n \n ))}\n \n
}\n {/*{(isTabletOrMobile && window.location.pathname !== '/') && slides.map((slideContent, index) => (*/}\n {/* \n 绅士，从来不只是徒有其表
MR.DANDY，从来不只是量体裁衣\n
\n -\n Gentlemen go beyond their good appearances
\n MR. DANDY goes beyond his tailored suits
\n
\n ![]({\"/products-logo.svg\"}/){kind=logo}
\n
FULL FUR LINING 全毛衬
*/}\n\n MR.DANDY高级定制创立于2014年。品牌创立至今，已成为中国男装高级定制的标杆，客户覆盖政商、体育、演艺界名流，目前已于北京、上海、深圳、武汉、郑州、杭州、南京设有
\n “喜好精致衣物的男人”是MR.DANDY的名词解释。作为形容词，它代表了“顶级的、做工精细的” 衣物。这样的
\n MR.DANDY高级定制品牌，区别于传统的高级定制，在西装的经典延续基础上融入了全新的理解与诠释。
\n \n Since its establishment in 2014, MR. DANDY has become in a leading position of Chinese bespoke brands, covering celebrities in politics, business, sports and entertainment industries. At present, there are 7 stores in Beijing, Shanghai, Shenzhen, Wuhan, Zhengzhou, Hangzhou and Nanjing all over China.\n
\n \n The word \"DANDY\" itself describes \"a man devoted to style, neatness and fashion in dress and appearance\". As an adjective, it represents \"top quality\" clothes. Always being delicate and elegant, MR. DANDY has a unique pursuit of life. Besides, it is also a type of contemporary gentleman that we aspire to create.\n
\n \n Different from traditional bespoke brand, MR. DANDY integrates new understanding and interpretation into classic menswear on the basis of continuing the traditions. MR. DANDY hopes to bring the best product to more gentlemen and makes more aesthetic customers enjoy bespoke service. In addition to adhering to the highest quality, it's more committed to meeting the all-round customization requirements of delicate men in life.\n \n
\n
\n {/*IMPORTED AUXILIARY MATERIALS 全进口辅料
*/}\n\n {isDesktopOrLaptop && 1440.0/900?\"bespoke-process-cover.jpg\":\"bespoke-process-cover-2.jpg\"}')`,\n backgroundPosition: \"center center\",\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n }}\n className={\"CoverImage\"}\n />}\n {!isDesktopOrLaptop &&
\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n width: state.app.width,\n height: state.app.height,\n footerHeight: state.app.footerHeight,\n bannerHeight: state.app.bannerHeight,\n logoRatio: state.app.logoRatio,\n openTopMenus: state.app.openTopMenus,\n blackHeader: state.app.blackHeader,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n toggleTopMenus: () => dispatch(toggleTopMenus()),\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n setBlackHeader: (isBlack) => dispatch(setBlackHeader(isBlack))\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(BespokeProcess);\n","import React, {useRef, useState, useLayoutEffect} from \"react\"\nimport {connect} from \"react-redux\";\nimport \"./Products.css\"\nimport {mouseEnter, mouseLeave, setBlackHeader, toggleTopMenus} from \"../actions/app\";\nimport SnapStart from \"../components/SnapStart\";\nimport {useMediaQuery} from \"react-responsive\";\nimport {MobileBreakPoint} from \"../constants\";\nimport { Helmet } from 'react-helmet';\n\n\nfunction Products({footerHeight, bannerHeight, logoRatio, width, height}) {\n const [layoutReady, setLayoutReady] = useState(false)\n const [scrollIntoView, setScrollIntoView] = useState(true)\n const ref = useRef(null)\n useLayoutEffect(() => {\n const timer = setTimeout(() => {\n setLayoutReady(true)\n }, 250)\n return () => {\n clearTimeout(timer)\n }\n }, [])\n const isDesktopOrLaptop = useMediaQuery({\n query: `(min-width: ${MobileBreakPoint+1}px)`\n })\n const isTabletOrMobile = useMediaQuery({\n query: `(max-width: ${MobileBreakPoint}px)`\n })\n\n return \n
\n \n 以自己的喜好为笔，在MR. DANDY，打造全世界最独一无二的艺术
\n -\n \nCreate the most unique art in the world on the canvas of MR. DANDY by pen of own preferences.\n \n
\n DESIGN\n 设计\n
\n\n MR.DANDY为客人精心准备了上万种面料，并根据客人的穿着风格、习惯以及场合设计最适合的款式。
\n \nMR. DANDY prepares more than ten thousands of different fabrics and provides most suitable designs by customer's dress style, habit and occasion.\n \n
MEASUREMENT 量体
\n\n 针对人体50处关键位置收集客人数据，量体师会根据客人的体态特征，有针对性的给予客人西装款式和风格的最佳建议。
\n \n Based on measurement data from 50 critical positions of the body, the master cutter provides the best advices on suit design and style according to the customer's physical characteristics.\n \n
FITTING 试样
\n\n 10-15天之后，做出毛样供客人试版，并进行调整。调整至完美程度后，将以此毛样制版并留存。
\n \n The rough sample is made for customer fitting in 10-15 days and it will be adjusted by their preferences. After adjusting to perfection, this pattern will be made and stored.\n \n
COMPLETION 完成
\n\n 试样之后25-30天，对成品进行最后的细微调试。交付成衣后，我们会提供终身的修改和维护服务。
\n \n The final subtle adjustment for the finished product will be made within 25-30 days after fitting process finishes. After delivery, we will provide the life-long adjustment and maintenance service.\n \n
\n {isDesktopOrLaptop && 1440.0/900?\"products-cover.jpg\":\"products-cover-2.jpg\"}')`,\n backgroundPosition: \"center center\",\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n }}\n className={\"CoverImage\"}\n />}\n {!isDesktopOrLaptop &&
\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n width: state.app.width,\n height: state.app.height,\n footerHeight: state.app.footerHeight,\n bannerHeight: state.app.bannerHeight,\n logoRatio: state.app.logoRatio,\n openTopMenus: state.app.openTopMenus,\n blackHeader: state.app.blackHeader,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n toggleTopMenus: () => dispatch(toggleTopMenus()),\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n setBlackHeader: (isBlack) => dispatch(setBlackHeader(isBlack))\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Products);\n","import React from \"react\"\nimport \"./CollectionItem.css\"\nimport {useMediaQuery} from \"react-responsive\";\nimport {MobileBreakPoint} from \"../constants\";\nimport {Helmet} from \"react-helmet\";\n\nfunction CollectionItem({collection, collectionType}) {\n\n const isDesktopOrLaptop = useMediaQuery({\n query: `(min-width: ${MobileBreakPoint}px)`\n })\n\n return \n
\n \n 定制种种皆可估量，唯有匠心不可预计。
\n -\n \n The customization is measurable, while the craftsmanship is uncountable.
\n \n
FULL CANVAS 全毛衬
\n\n 在MR.DANDY，体验身体最完美的呼吸方式。
\n 纯手工定制西装消耗的从来不只是物质，还有隐藏在这之后看不见的时间打磨。前后多达360多套工序，一万多个针脚的手工缝制，工时超过40个小时。
\n 有人认为款式是一件西装成败的关键，而实际上，全毛衬才是手工西装的灵魂所在。毛衬工艺，避免了工业西装工艺对优质面料原始性能的破坏，最大程度的保留了西装面料的悬垂感、柔软感和自然感。
\n \n Experience the perfect breath way of the body at MR. DANDY.\n
\n \nThe handmade tailored suit never just consumes the material, but also consumes time. There are more than 360 processes and over 10,000 stitches made by hand with above 40 hours.\n
\n \n People may think design is the key to a well-made suit. In fact, full canvas is the true spirit of a handmade tailored suit. Averting the destruction of original performance of high-quality fabric by industrial suit process, the full canvas process retains the draping feeling, soft feeling and natural feeling of top quality suit fabric to the greatest extent.\n \n
PERSONAL PATTERN 一人一版
\n\n 在MR.DANDY，您的所有细节都会得到尊重。
\n 一直以来，单独制版过程都是高级定制的核心之一。每一位客人都由版师单独剪裁制版，这是高级定制与成衣的最大分别。您的版型纸样都会永久保存在MR.DANDY。若没有太大变化，之后的定制服务，都可以根据这个专属版型制作。
\n \n All your personal details will be respected at MR. DANDY.\n
\n \n The personal pattern cutting process has always been one of the most important part of bespoke suit service. The master cutter makes patterns for each customer after body measurement, which is the biggest difference between bespoke and ready-to-wear suit. The paper pattern for each customer will be stored in MR. DANDY permanently and provides life-long time service.\n \n
DETAILS 细节特征
\n\n 在MR.DANDY，每一道线条都有生命。
\n 绅士西装的每一处细节，都刺绣着他们的风度。毛衬工艺赋予了西装翻领一个完美的弧线，在翻领处用真丝线花费超过两个小时锁出的米兰眼插花孔是顶级手工西装的标志之一,而米兰眼上合尾处的18k金线手缝金点就是MR.DANDY的独特标识。金点细节已于2019年申请专利设计保护。
\n MR.DANDY的另外一个精致细节，在于口袋的处理。船型口袋的设计贴合于身体，又让整个设计都充满了流畅的节奏。
\n MR.DANDY的每一处细节都可以被定制，亦提供西装内衬图案的私人定制服务。它可以是一张客人珍爱的油画作品，也可以是一张带着记忆的珍贵照片，身着一件MR.DANDY，无时无刻不与自己的珍爱相拥。
\n D字形的插笔袋也是MR.DANDY的标志之一，使本来严肃的西装气质中流露出一丝生动的风情。
\n MR.DANDY部也会进行一些特殊的处理。大部分工业西装很难达到完全贴服肩膀和肱二头肌，而我们采用了一种特殊工艺，在肩袖缝合处做出一个与客人身体曲线一致的部分。这种设计不仅体现在日常穿着上，在悬挂时也会呈现出一个优美的弧度。将客人的身体特征融入到整体设计里，让西装不再仅仅是一件衣服，而是身体的一个部分。
\n \n Every detail is alive at MR. DANDY.\n
\n \n Every detail on a bespoke suit shows the gentleman's style. The well-made full canvas makes the lapel a perfect roll. The flower hole on suit lapel made by Milanese button hole technique is made from pure silk, which is one of the top-quality suit symbol, and the 18k gold thread hand sewing golden dot at the side of Milanese flower holes is the unique signature of MR. DANDY. The patent protection had been applied for this golden dot design in 2019.\n
\n \n Another fine detail of MR. DANDY lies in chest pocket. The boat-shape pocket design fits the body curve for every gentleman.\n
\n \n Every detail of MR. DANDY can be customized at MR. DANDY, even suit linings. It can be a favorite oil painting or a precious picture with memories. Wearing MR. DANDY, you're surrounded by your loved ones all the time.\n
\n \n The D-shape pen pocket is also one of MR. DANDY symbols. It makes the serious suit spirit with a vivid amorous feeling.\n
\n \n Some special techniques are used for the shoulder parts of MR. DANDY products. As it is difficult for most ready-to-wear suits to fully fit the shoulders, we use a technique to match the curve of the customer's body at the shoulder sleeve suture part. Performed by everyday dressing, it also shows a beautiful curve when hanging. The body details of the customer are integrated into the overall design, making the suit not only a piece of clothing but also a part of the body.\n \n
World Finest Fabric 全球顶级面料
\n\n\n 以时间为针，空间为线，在岁月变迁中编织优雅年轮。
\n MR.DANDY只选择最优秀的合作，只将最美好的事物送入您的视野。我们提供来自英国、法国和意大利的几十种品牌，共计上万种面料供顾客选择。除了网罗大部分经典西装面料，亦准备了如超高支纱、100%Vicuña、钻石粉、兰花香、古董面料、定制条纹等珍稀面料。
\n \n With time as the needle and space as thread, we weave the elegant products through the years.\n
\n \n To bring the best to you, MR. DANDY only selects the best fabric around the world and provides all the top fabric brands from United Kingdom, France and Italy with over ten thousands different kinds of fabrics that can be chosen for the customer. In addition to seek most of classic suit fabrics, we also prepare the rare and precious fabrics (such as ultra-high super, 100%Vicuña, diamond chip, orchid fragrance, vintage and even customized stripe fabrics).\n \n
Top Quality Accessories\n 全进口辅料
\n\n MR.DANDY从来不只是表面，所有在客人看不到的地方我们也做到了极致。
\n MR.DANDY的全部产品细节，大至毛衬，小至每一粒纽扣每一道缝线，均选用世界顶级的材料打造。这是MR.DANDY为所有客人献上的诚意。
\n \n MR. DANDY makes every effort to do the best for all the details, even the parts can't be seen.\n
\n \n All the product details of MR. DANDY (including canvas, every button or thread) are made from top materials in the world. This is the sincerity from MR. DANDY.\n \n
\n {(collection && collection.nameCn) && \n MR.DANDY | {collection.nameCn} \n \n }\n {collection && collection.images && collection.images.split(\",\").map((img, key) => {\n return
\n}\n\nexport default CollectionItem;\n","import React from \"react\"\nimport \"./Collection.css\"\nimport {Link} from \"react-router-dom\";\n\nfunction Collection({mouseLeave, mouseEnter, collectionType, collections}) {\n if (!collectionType) {\n collectionType = \"formalwear\"\n }\n return \n 
\n
\n })}\n \n \n {collectionType === \"formalwear\" &&\n (FORMALWEAR 礼服) \n }\n {collectionType === \"suits\" &&\n (SUIT 西服套装) \n }\n {collectionType === \"blazer-jackets\" &&\n (BLAZER & JACKET 单西与夹克) \n }\n {collectionType === \"overcoat\" &&\n ( OVERCOAT 大衣) \n }\n
\n \n
\n \n {(collection && collection.nameEn) && collection.nameEn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n {(collection && collection.nameCn) && collection.nameCn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n {isDesktopOrLaptop &&\n \n {(collection && collection.price) ? `∙ ${collection.price.trim()} ∙` : \"\"}\n \n }\n
\n \n })}\n {(collection && collection.nameCn) && collection.nameCn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n {isDesktopOrLaptop &&\n \n {(collection && collection.price) ? `∙ ${collection.price.trim()} ∙` : \"\"}\n \n }\n
\n
\n {!isDesktopOrLaptop && \n {(collection && collection.detailsEn) && collection.detailsEn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n {(collection && collection.detailsCn) && collection.detailsCn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n {isDesktopOrLaptop &&
}\n {isDesktopOrLaptop &&
}\n
\n \n })}\n {(collection && collection.detailsCn) && collection.detailsCn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n {isDesktopOrLaptop &&
}\n {isDesktopOrLaptop &&
}\n
\n
}\n \n \n {(collection && collection.price) ? `∙ ${collection.price.trim()} ∙` : \"\"}\n \n
\n \n \n If you have any questions, you may contact us to assist you.
\n \n 如果您有任何疑问，请联系我们。\n
\n \n \n 如果您有任何疑问，请联系我们。\n
\n {collections && collections.map((c, key) => {\n return
\n}\n\nexport default Collection;\n","var _g;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction Svg(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 39.41 21.12\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"Asset 1\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Layer_2\",\n \"data-name\": \"Layer 2\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"\\\\u56FE\\\\u5C42_1\",\n \"data-name\": \"\\\\u56FE\\\\u5C42 1\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n x: -3.37,\n y: 9.56,\n width: 27.87,\n height: 2,\n transform: \"translate(10.56 -4.37) rotate(45)\"\n }), /*#__PURE__*/React.createElement(\"rect\", {\n x: 14.92,\n y: 9.56,\n width: 27.87,\n height: 2,\n transform: \"translate(56.72 -2.37) rotate(135)\"\n })))));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(Svg);\nexport default __webpack_public_path__ + \"static/media/商品分类下拉箭头.d25a0c320a55028dc80688a6fa1a2a03.svg\";\nexport { ForwardRef as ReactComponent };","import React, {useRef, useState, useEffect, useLayoutEffect} from \"react\"\nimport {connect} from \"react-redux\";\nimport \"./Collections.css\"\nimport {Link} from \"react-router-dom\";\nimport {mouseEnter, mouseLeave, setBlackHeader, toggleTopMenus} from \"../actions/app\";\nimport SnapStart from \"../components/SnapStart\";\nimport CollectionItem from \"../components/CollectionItem\";\nimport Collection from \"../components/Collection\";\nimport {useMediaQuery} from \"react-responsive\";\nimport {MobileBreakPoint} from \"../constants\";\nimport Arrow from \"../images/商品分类下拉箭头.svg\"\nimport axios from \"axios\";\nimport {Helmet} from \"react-helmet\";\n\nfunction Collections({match: {params: {type: collectionType, name: collectionID}}, footerHeight, bannerHeight, logoRatio, width, height, mouseEnter, mouseLeave, pathname}) {\n const [layoutReady, setLayoutReady] = useState(false)\n const [scrollIntoView, setScrollIntoView] = useState(true)\n const [menuOpen, setMenuOpen] = useState(false)\n const [showNav, setShowNav] = useState(false)\n const [firstOpen, setFirstOpen] = useState(true)\n const [collections, setCollections] = useState(null)\n const [collection, setCollection] = useState(null)\n const ref = useRef(null)\n const topRef = useRef(null)\n const contentRef = useRef(null)\n const isDesktopOrLaptop = useMediaQuery({\n query: `(min-width: ${MobileBreakPoint+1}px)`\n })\n const isTabletOrMobile = useMediaQuery({\n query: `(max-width: ${MobileBreakPoint}px)`\n })\n // if (!collectionType) {\n // collectionType = \"formalwear\"\n // }\n useEffect(() => {\n if (!collectionID) {\n setCollections(null)\n axios.get(`/api/v1/collections?type=${collectionType ? collectionType : \"formalwear\"}`).then(({data}) => {\n console.log(data)\n setCollections(data)\n })\n } else if (!!collectionID) {\n setCollection(null)\n axios.get(`/api/v1/collections/${collectionID}`).then(({data}) => {\n setCollection(data)\n })\n }\n }, [pathname])\n useEffect(() => {\n if (firstOpen) {\n setFirstOpen(false)\n return\n }\n if (pathname === \"/collections\") {\n setScrollIntoView(true)\n if (isDesktopOrLaptop && topRef && topRef.current) {\n topRef.current.scrollIntoView(false, {behavior: \"smooth\"})\n }\n return\n }\n if (isDesktopOrLaptop && contentRef && contentRef.current) {\n contentRef.current.scrollIntoView(true, {behavior: \"smooth\"})\n }\n }, [pathname])\n var showTimer\n useLayoutEffect(() => {\n const timer = setTimeout(() => {\n setLayoutReady(true)\n }, 250)\n return () => {\n clearTimeout(timer)\n clearTimeout(showTimer)\n }\n }, [])\n console.log(collectionType, collectionID)\n return \n \n {c.cover && 
}\n \n
\n })}\n }\n \n \n \n {c.nameEn && c.nameEn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n {c.nameCn && c.nameCn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n \n
\n \n {c.price ? `∙ ${c.price.trim()} ∙` : \"\"}\n \n
\n \n })}\n {c.nameCn && c.nameCn.split(\"\\n\").map((l, i) => {\n return {l}
\n })}\n \n
\n \n {c.price ? `∙ ${c.price.trim()} ∙` : \"\"}\n \n
\n {isDesktopOrLaptop &&\n \n }\n {isDesktopOrLaptop && layoutReady &&
\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n width: state.app.width,\n height: state.app.height,\n footerHeight: state.app.footerHeight,\n bannerHeight: state.app.bannerHeight,\n logoRatio: state.app.logoRatio,\n openTopMenus: state.app.openTopMenus,\n blackHeader: state.app.blackHeader,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n toggleTopMenus: () => dispatch(toggleTopMenus()),\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n setBlackHeader: (isBlack) => dispatch(setBlackHeader(isBlack))\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Collections);\n","import React from 'react';\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nconst defaultProps = {\n breakpointCols: undefined,\n // optional, number or object { default: number, [key: number]: number }\n className: undefined,\n // required, string\n columnClassName: undefined,\n // optional, string\n // Any React children. Typically an array of JSX items\n children: undefined,\n // Custom attributes, however it is advised against\n // using these to prevent unintended issues and future conflicts\n // ...any other attribute, will be added to the container\n columnAttrs: undefined,\n // object, added to the columns\n // Deprecated props\n // The column property is deprecated.\n // It is an alias of the `columnAttrs` property\n column: undefined\n};\nconst DEFAULT_COLUMNS = 2;\n\nclass Masonry extends React.Component {\n constructor(props) {\n super(props); // Correct scope for when methods are accessed externally\n\n this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this);\n this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // default state\n\n let columnCount;\n\n if (this.props.breakpointCols && this.props.breakpointCols.default) {\n columnCount = this.props.breakpointCols.default;\n } else {\n columnCount = parseInt(this.props.breakpointCols) || DEFAULT_COLUMNS;\n }\n\n this.state = {\n columnCount\n };\n }\n\n componentDidMount() {\n this.reCalculateColumnCount(); // window may not be available in some environments\n\n if (window) {\n window.addEventListener('resize', this.reCalculateColumnCountDebounce);\n }\n }\n\n componentDidUpdate() {\n this.reCalculateColumnCount();\n }\n\n componentWillUnmount() {\n if (window) {\n window.removeEventListener('resize', this.reCalculateColumnCountDebounce);\n }\n }\n\n reCalculateColumnCountDebounce() {\n if (!window || !window.requestAnimationFrame) {\n // IE10+\n this.reCalculateColumnCount();\n return;\n }\n\n if (window.cancelAnimationFrame) {\n // IE10+\n window.cancelAnimationFrame(this._lastRecalculateAnimationFrame);\n }\n\n this._lastRecalculateAnimationFrame = window.requestAnimationFrame(() => {\n this.reCalculateColumnCount();\n });\n }\n\n reCalculateColumnCount() {\n const windowWidth = window && window.innerWidth || Infinity;\n let breakpointColsObject = this.props.breakpointCols; // Allow passing a single number to `breakpointCols` instead of an object\n\n if (typeof breakpointColsObject !== 'object') {\n breakpointColsObject = {\n default: parseInt(breakpointColsObject) || DEFAULT_COLUMNS\n };\n }\n\n let matchedBreakpoint = Infinity;\n let columns = breakpointColsObject.default || DEFAULT_COLUMNS;\n\n for (let breakpoint in breakpointColsObject) {\n const optBreakpoint = parseInt(breakpoint);\n const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint;\n\n if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {\n matchedBreakpoint = optBreakpoint;\n columns = breakpointColsObject[breakpoint];\n }\n }\n\n columns = Math.max(1, parseInt(columns) || 1);\n\n if (this.state.columnCount !== columns) {\n this.setState({\n columnCount: columns\n });\n }\n }\n\n itemsInColumns() {\n const currentColumnCount = this.state.columnCount;\n const itemsInColumns = new Array(currentColumnCount); // Force children to be handled as an array\n\n const items = React.Children.toArray(this.props.children);\n\n for (let i = 0; i < items.length; i++) {\n const columnIndex = i % currentColumnCount;\n\n if (!itemsInColumns[columnIndex]) {\n itemsInColumns[columnIndex] = [];\n }\n\n itemsInColumns[columnIndex].push(items[i]);\n }\n\n return itemsInColumns;\n }\n\n renderColumns() {\n const {\n column,\n columnAttrs = {},\n columnClassName\n } = this.props;\n const childrenInColumns = this.itemsInColumns();\n const columnWidth = `${100 / childrenInColumns.length}%`;\n let className = columnClassName;\n\n if (className && typeof className !== 'string') {\n this.logDeprecated('The property \"columnClassName\" requires a string'); // This is a deprecated default and will be removed soon.\n\n if (typeof className === 'undefined') {\n className = 'my-masonry-grid_column';\n }\n }\n\n const columnAttributes = _objectSpread(_objectSpread(_objectSpread({}, column), columnAttrs), {}, {\n style: _objectSpread(_objectSpread({}, columnAttrs.style), {}, {\n width: columnWidth\n }),\n className\n });\n\n return childrenInColumns.map((items, i) => {\n return /*#__PURE__*/React.createElement(\"div\", _extends({}, columnAttributes, {\n key: i\n }), items);\n });\n }\n\n logDeprecated(message) {\n console.error('[Masonry]', message);\n }\n\n render() {\n const _this$props = this.props,\n {\n // ignored\n children,\n breakpointCols,\n columnClassName,\n columnAttrs,\n column,\n // used\n className\n } = _this$props,\n rest = _objectWithoutProperties(_this$props, [\"children\", \"breakpointCols\", \"columnClassName\", \"columnAttrs\", \"column\", \"className\"]);\n\n let classNameOutput = className;\n\n if (typeof className !== 'string') {\n this.logDeprecated('The property \"className\" requires a string'); // This is a deprecated default and will be removed soon.\n\n if (typeof className === 'undefined') {\n classNameOutput = 'my-masonry-grid';\n }\n }\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({}, rest, {\n className: classNameOutput\n }), this.renderColumns());\n }\n\n}\n\nMasonry.defaultProps = defaultProps;\n\nexport default Masonry;\n","import React, {useRef, useState, useLayoutEffect} from \"react\"\nimport {connect} from \"react-redux\";\nimport \"./OurClients.css\"\nimport {mouseEnter, mouseLeave, setBlackHeader, toggleTopMenus} from \"../actions/app\";\nimport SnapStart from \"../components/SnapStart\";\n\nimport debounce from \"react-reveal/src/lib/debounce\";\nimport Masonry from 'react-masonry-css'\nimport {useMediaQuery} from \"react-responsive\";\nimport {MobileBreakPoint} from \"../constants\";\nimport axios from \"axios\";\nimport {Helmet} from 'react-helmet';\n\n\nfunction OurClients({footerHeight, bannerHeight, logoRatio, width, height}) {\n const [layoutReady, setLayoutReady] = useState(false)\n const [scrollIntoView, setScrollIntoView] = useState(true)\n const [clients, setClients] = useState(null)\n const [hasMore, setHasMore] = useState(true)\n const [viewIndex, setViewIndex] = useState(0)\n const [showLoading, setShowLoading] = useState(false)\n const [hideSnap, setHideSnap] = useState(false)\n const ref = useRef(null)\n const isDesktopOrLaptop = useMediaQuery({\n query: `(min-width: ${MobileBreakPoint + 1}px)`\n })\n const isTabletOrMobile = useMediaQuery({\n query: `(max-width: ${MobileBreakPoint}px)`\n })\n const viewCount = isDesktopOrLaptop ? 8 : 8\n useLayoutEffect(() => {\n const timer = setTimeout(() => {\n setLayoutReady(true)\n }, 250)\n axios.get(`/api/v1/clients`).then(({data}) => {\n if (data.length > 100) {\n data = data.slice(0, 100)\n }\n setClients(data)\n if (data.length < viewCount) {\n setViewIndex(data.length)\n } else {\n setViewIndex(viewCount)\n }\n })\n return () => {\n clearTimeout(timer)\n }\n }, [])\n\n const debounceLoad = debounce(() => {\n if (!clients) {\n return\n }\n if (viewIndex + viewCount < clients.length) {\n setViewIndex(viewCount + viewIndex)\n } else {\n setViewIndex(clients.length)\n }\n setShowLoading(false)\n }, 1000)\n\n const handleScroll = (e) => {\n // if (isDesktopOrLaptop) {\n // return\n // }\n const bottom = Math.abs(e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight) < 20;\n // console.log(e.target.scrollHeight - e.target.scrollTop, e.target.clientHeight, e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight)\n if (bottom) {\n if(viewIndex !== clients.length) {\n setShowLoading(true)\n }\n setHideSnap(true)\n debounceLoad()\n }\n }\n\n return \n }\n {/*{(!(collectionID || collectionType) && isDesktopOrLaptop) &&*/}\n {isDesktopOrLaptop &&\n
\n {/*{layoutReady && 1440.0/900?\"collections-cover.jpg\":\"collections-cover-2.jpg\"}')`,\n\n backgroundPosition: \"center center\",\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n }}\n className={\"CoverImage\"}\n />\n }\n {isDesktopOrLaptop &&\n \n }\n {isDesktopOrLaptop && layoutReady &&
\n \n \n \n {!!collectionID &&
\n \n {!isDesktopOrLaptop && {\n event.preventDefault()\n event.stopPropagation()\n if (!menuOpen) {\n showTimer = setTimeout(() => {\n setShowNav(true)\n }, 10)\n } else {\n setShowNav(false)\n }\n setMenuOpen(!menuOpen)\n }}\n src={Arrow}\n alt={\"arrow\"}\n className={menuOpen ? \"Opened\" : \"\"}\n />}\n {(isDesktopOrLaptop || menuOpen || collectionType === \"formalwear\" || !collectionType) &&\n
\n {isDesktopOrLaptop && }\n \n {\n setMenuOpen(false)\n }}\n className={`${(collectionType === \"formalwear\" || !collectionType) ? 'Active' : ''} ${showNav ? 'Show' : 'Hide'}`}\n to={\"/collections/formalwear\"} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>\n \n FORMALWEAR\n
\n \n 礼服\n \n
\n }\n {(isDesktopOrLaptop || menuOpen || collectionType === \"suit\") &&\n \n \n 礼服\n \n
\n {\n setMenuOpen(false)\n }}\n className={`${collectionType === 'suits' ? 'Active' : ''} ${showNav ? 'Show' : 'Hide'}`}\n to={\"/collections/suits\"} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>\n \n SUIT\n
\n \n 西服套装\n \n
\n }\n {(isDesktopOrLaptop || menuOpen || collectionType === \"blazer-jackets\") &&\n \n \n 西服套装\n \n
\n {\n setMenuOpen(false)\n }}\n className={`${collectionType === 'blazer-jackets' ? 'Active' : ''} ${showNav ? 'Show' : 'Hide'}`}\n to={\"/collections/blazer-jackets\"} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>\n \n BLAZER & JACKET\n
\n \n 单西与夹克\n \n
\n }\n {(isDesktopOrLaptop || menuOpen || collectionType === \"overcoat\") &&\n \n \n 单西与夹克\n \n
\n {\n setMenuOpen(false)\n }}\n className={`${collectionType === 'overcoat' ? 'Active' : ''} ${showNav ? 'Show' : 'Hide'}`}\n to={\"/collections/overcoat\"} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>\n \n OVERCOAT\n
\n \n 大衣\n \n
\n }\n \n \n 大衣\n \n
\n }\n {isDesktopOrLaptop &&\n \n }\n {isDesktopOrLaptop &&\n \n }\n
\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n width: state.app.width,\n height: state.app.height,\n footerHeight: state.app.footerHeight,\n bannerHeight: state.app.bannerHeight,\n logoRatio: state.app.logoRatio,\n openTopMenus: state.app.openTopMenus,\n blackHeader: state.app.blackHeader,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n toggleTopMenus: () => dispatch(toggleTopMenus()),\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n setBlackHeader: (isBlack) => dispatch(setBlackHeader(isBlack))\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(OurClients);\n","// Returns a function, that, as long as it continues to be invoked, will not\n// be triggered. The function will be called after it stops being called for\n// N milliseconds. If `immediate` is passed, trigger the function on the\n// leading edge, instead of the trailing.\nexport default function debounce(func, wait, immediate) {\n\tvar timeout;\n\treturn function() {\n\t\tvar context = this, args = arguments;\n\t\tvar later = function() {\n\t\t\ttimeout = null;\n\t\t\tif (!immediate) func.apply(context, args);\n\t\t};\n\t\tvar callNow = immediate && !timeout;\n\t\tclearTimeout(timeout);\n\t\ttimeout = setTimeout(later, wait);\n\t\tif (callNow) func.apply(context, args);\n\t};\n};\n\n// Copyright (c) 2009-2017 Jeremy Ashkenas, DocumentCloud and Investigative\n// Reporters & Editors\n// \n// Permission is hereby granted, free of charge, to any person\n// obtaining a copy of this software and associated documentation\n// files (the \"Software\"), to deal in the Software without\n// restriction, including without limitation the rights to use,\n// copy, modify, merge, publish, distribute, sublicense, and/or sell\n// copies of the Software, and to permit persons to whom the\n// Software is furnished to do so, subject to the following\n// conditions:\n// \n// The above copyright notice and this permission notice shall be\n// included in all copies or substantial portions of the Software.\n// \n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n// OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n// HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n// WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n// OTHER DEALINGS IN THE SOFTWARE.","import React, {useRef, useState, useLayoutEffect} from \"react\"\nimport {connect} from \"react-redux\";\nimport \"./ContactUs.css\"\nimport {mouseEnter, mouseLeave, setBlackHeader, toggleTopMenus} from \"../actions/app\";\nimport SnapStart from \"../components/SnapStart\";\nimport {useMediaQuery} from \"react-responsive\";\nimport {MobileBreakPoint} from \"../constants\";\nimport {Helmet} from 'react-helmet';\n\n\nfunction ContactUs({footerHeight, bannerHeight, logoRatio, width, height}) {\n const [layoutReady, setLayoutReady] = useState(false)\n const [scrollIntoView, setScrollIntoView] = useState(true)\n const ref = useRef(null)\n const isDesktopOrLaptop = useMediaQuery({\n query: `(min-width: ${MobileBreakPoint + 1}px)`\n })\n const isTabletOrMobile = useMediaQuery({\n query: `(max-width: ${MobileBreakPoint}px)`\n })\n useLayoutEffect(() => {\n const timer = setTimeout(() => {\n setLayoutReady(true)\n }, 250)\n return () => {\n clearTimeout(timer)\n }\n }, [])\n\n return \n \n {clients && clients.slice(0, isDesktopOrLaptop ? viewIndex : viewIndex).map((c, key) => {\n return ![]({isDesktopOrLaptop?\"/loading.gif\":\"/loading-m.gif\"}/)
}\n
\n \n 
\n
\n })}\n \n {showLoading && \n \n {c.titleEn}
\n {c.titleCn}\n
\n \n {c.titleCn}\n
}\n \n {isDesktopOrLaptop &&\n 1440.0 / 900 ? \"contact-us-cover.jpg\" : \"contact-us-cover-2.jpg\"}')`,\n // backgroundImage: \"url(/contact-us-cover.jpg)\",\n backgroundPosition: \"center center\",\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n }}\n className={\"CoverImage\"}\n />}\n {!isDesktopOrLaptop &&\n
\n}\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n width: state.app.width,\n height: state.app.height,\n footerHeight: state.app.footerHeight,\n bannerHeight: state.app.bannerHeight,\n logoRatio: state.app.logoRatio,\n openTopMenus: state.app.openTopMenus,\n blackHeader: state.app.blackHeader,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n toggleTopMenus: () => dispatch(toggleTopMenus()),\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n setBlackHeader: (isBlack) => dispatch(setBlackHeader(isBlack))\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ContactUs);\n","import React from \"react\"\n\nexport default function (props) {\n const {width, height} = props\n return \n}\n","import React, {useState} from \"react\"\nimport {connect} from \"react-redux\"\nimport {Link} from \"react-router-dom\";\nimport \"./MobileHeader.css\"\nimport {mouseEnter, mouseLeave, rndID} from \"../actions/app\";\nimport LogoIcon from \"./LogoIcon\";\n\nfunction MobileHeader({rndID, pathname, mouseLeave, mouseEnter}) {\n const [openMenu, setOpenMenu] = useState(false)\n\n return \n {isDesktopOrLaptop && layoutReady &&
\n \n
\n {isDesktopOrLaptop && layoutReady && \n \n ADDRESS
\n \n 店铺地址\n
\n \n \n 店铺地址\n
\n
\n \n ![]({\"/beijing.svg\"}/)
\n
\n \n
\n \n \n BEIJING
\n \n \n 北京店\n \n
\n \n \n \n 北京店\n \n
\n\n\n \n NO. 103, XINGYUANHUI COMMERCE-SUBJACENT,
\n \n \n NO. 63 XINYUAN STREET, CHAOYANG DISTRICT,
\n \n \n BEIJING, CHINA
\n \n 北京市朝阳区新源街63号底商103\n
\n \n \n \n NO. 63 XINYUAN STREET, CHAOYANG DISTRICT,
\n \n \n BEIJING, CHINA
\n \n 北京市朝阳区新源街63号底商103\n
\n ![]({\"/shanghai.png\"}/)
\n
\n \n
\n \n \n SHANGHAI
\n \n 上海店\n
\n \n \n 上海店\n
\n \n RM 502, WALDORF DOLLAR BUILDING,
\n NO.51, GUANGDONG ROAD, HUANGPU DISTRICT,
\n SHANGHAI, CHINA
\n \n 上海市黄浦区广东路51号华尔道大来大楼502\n
\n \n NO.51, GUANGDONG ROAD, HUANGPU DISTRICT,
\n SHANGHAI, CHINA
\n \n 上海市黄浦区广东路51号华尔道大来大楼502\n
\n ![]({\"/shenzhen.svg\"}/)
\n
\n \n
\n \n \n SHENZHEN
\n \n 深圳店\n
\n \n \n 深圳店\n
\n \n 6009, BUILDING C, NEO ENTERPRISE BUILDING,
\n SHENNAN ROAD, FUTIAN DISTRICT,
\n SHENZHEN, GUANGDONG, CHINA
\n \n 广东省深圳市福田区深南大道6009号NEO大厦C座\n
\n \n SHENNAN ROAD, FUTIAN DISTRICT,
\n SHENZHEN, GUANGDONG, CHINA
\n \n 广东省深圳市福田区深南大道6009号NEO大厦C座\n
\n ![]({\"/wuhan.svg\"}/)
\n
\n \n
\n \n \n WUHAN
\n \n 武汉店\n
\n \n \n 武汉店\n
\n \n 604 WUHAN WANDA CENTER,
\n NO. 96 LINJIANG ROAD, JIYU BRIDGE STREET,
\n WUCHANG DISTRICT, WUHAN, CHINA
\n \n 湖北省武汉市武昌区积玉桥街临江大道96号武汉万达中心604\n
\n \n NO. 96 LINJIANG ROAD, JIYU BRIDGE STREET,
\n WUCHANG DISTRICT, WUHAN, CHINA
\n \n 湖北省武汉市武昌区积玉桥街临江大道96号武汉万达中心604\n
\n ![]({\"/zhengzhou.svg\"}/)
\n
\n \n
\n \n \n ZHENGZHOU
\n \n 郑州店\n
\n \n \n 郑州店\n
\n \n ROOM 503,BUILDING E,
\n JIANYE HEADQUARTERS PORT,
\n RUYI WEST ROAD, ZHENGZHOU,
\n HENAN PROVINCE
\n \n 郑州市如意西路建业总部港E座503\n
\n \n JIANYE HEADQUARTERS PORT,
\n RUYI WEST ROAD, ZHENGZHOU,
\n HENAN PROVINCE
\n \n 郑州市如意西路建业总部港E座503\n
\n ![]({\"/hangzhou.svg\"}/)
\n
\n \n
\n \n \n HANGZHOU
\n \n 杭州店\n
\n \n \n 杭州店\n
\n \n BUILDING 4,NO.90 CHENGXING ROAD,
\n SHANGCHENG DISTRICT,
\n HANGZHOU,ZHEJIANG
\n \n 浙江省杭州市上城区城星路90号4幢\n
\n \n SHANGCHENG DISTRICT,
\n HANGZHOU,ZHEJIANG
\n \n 浙江省杭州市上城区城星路90号4幢\n
\n ![]({\"/nanjing.svg\"}/)
\n
\n \n
\n \n \n NANJING
\n \n 南京店\n
\n \n \n 南京店\n
\n \n -1F, INFINITE HORIZONS ART CLUB,
\n JIANYE DISTRICT, NANJING,
\n JIANGSU PROVINCE
\n \n 江苏省南京市建邺区中海 · 江南玖序金陵艺术会所-1F\n
\n \n JIANYE DISTRICT, NANJING,
\n JIANGSU PROVINCE
\n \n 江苏省南京市建邺区中海 · 江南玖序金陵艺术会所-1F\n
\n
\n {/*{isDesktopOrLaptop && layoutReady && \n \n CONTACT
\n \n 联系方式\n
\n \n \n 联系方式\n
\n
\n \n
\n \n
\n \n \n TELEPHONE
\n \n 全国统一客服电话\n
\n \n \n 全国统一客服电话\n
\n \n 400-886-5786\n \n
\n \n
\n \n \n WECHAT ID
\n \n 全国统一客服微信\n
\n \n \n 全国统一客服微信\n
\n \n mrdandyservice\n \n
\n \n
\n \n \n E-MAIL
\n \n 邮箱\n
\n \n \n 邮箱\n
\n \n huzhen@mrdandy.com.cn\n \n
\n \n
\n \n \n SOCIAL MEDIA
\n \n 官方媒体\n
\n \n \n 官方媒体\n
\n
\n \n
\n \n
\n \n \n INSTAGRAM\n \n
\n \n \n mrdandybespoke\n \n
\n \n
\n \n \n WEIBO
\n \n 新浪微博\n
\n \n \n 新浪微博\n
\n \n MrDandy\n 官方微博\n
\n \n ![]({\"/微信二维码.svg\"}/)
\n
\n \n \n WECHAT PUBLIC
ACCOUNTS
\n \n 微信公众号\n
\n ACCOUNTS
\n \n 微信公众号\n
\n
\n \n \n TIK TOK
\n \n 抖音\n
\n \n \n 抖音\n
\n \n Mr.Dandy\n 胡榛\n
\n \n
\n \n \n BILIBILI
\n \n
\n \n \n
\n \n MrDandy\n 胡榛\n
\n \n
\n \n \n XIAOHONGSHU
\n \n 小红书\n
\n \n \n 小红书\n
\n \n Mr. Dandy\n \n
\n \n {!openMenu && \n {\n setOpenMenu(true)\n }}\n >\n \n
\n \n \n ABOUT BRAND\n \n
\n \n \n 关于品牌\n \n
\n \n \n
\n \n \n BESPOKE PROCESS\n \n
\n \n \n 定制流程\n \n
\n \n
\n \n \n PRODUCTS\n \n
\n \n \n 产品介绍\n \n
\n \n
\n \n \n COLLECTIONS\n \n
\n \n \n 样衣展示\n \n
\n \n
\n \n \n OUR CLIENTS\n \n
\n \n \n 明星案例\n \n
\n \n
\n \n \n}\n\n\nconst mapStateToProps = (state, ownProps) => {\n return {\n pathname: state.router.location.pathname,\n }\n}\n\nconst mapDispatchToProps = dispatch => {\n return {\n mouseEnter: () => dispatch(mouseEnter()),\n mouseLeave: () => dispatch(mouseLeave()),\n rndID: () => dispatch(rndID()),\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MobileHeader);\n\n","import {\n Switch,\n Route,\n} from \"react-router\";\nimport {Link} from \"react-router-dom\";\nimport {connect} from \"react-redux\"\nimport React, {useEffect} from \"react\"\nimport Footer from \"./components/Footer\";\nimport TopBanner from \"./components/TopBanner\";\nimport {withSize} from 'react-sizeme'\nimport {mouseEnter, mouseLeave, rndID, toggleTopMenus, updateAppSize} from \"./actions/app\";\nimport Home from \"./pages/Home\";\nimport BespokeProcess from \"./pages/BespokeProcess\";\nimport Products from \"./pages/Products\";\nimport Collections from \"./pages/Collections\";\n\nimport './App.css';\nimport OurClients from \"./pages/OurClients\";\nimport ContactUs from \"./pages/ContactUs\";\nimport LogoIcon from \"./components/LogoIcon\";\nimport {useMediaQuery} from \"react-responsive\";\nimport MobileHeader from \"./components/MobileHeader\";\nimport {MobileBreakPoint} from \"./constants\";\n\n\nfunction App({pathname, showBigBall, rndID, size: {width, height}, openTopMenus, updateAppSize, toggleTopMenus, mouseEnter, mouseLeave}) {\n const ref = React.useRef(null)\n const contentRef = React.useRef(null)\n useEffect(() => {\n updateAppSize(width, height)\n }, [width, height])\n const isDesktopOrLaptop = useMediaQuery({\n query: `(min-width: ${MobileBreakPoint+1}px)`\n })\n const isTabletOrMobile = useMediaQuery({\n query: `(max-width: ${MobileBreakPoint}px)`\n })\n // const mouse = useMouse(ref, {\n // enterDelay: 30,\n // leaveDelay: 30,\n // })\n return (\n \n \n CONTACT US\n \n
\n \n \n 联系我们\n \n
\n \n {isDesktopOrLaptop && \n {\n rndID()\n }}\n >\n
\n }\n